ページデザインで迷わない！WEBサイトを形にする学習ステップ
オンラインスクール卒業後に独学で頑張ってきた私が思う、効率の良いWEBサイト制作学習は、「コーディング」→「企画構成力」の次に「デザイン」学習に進むという内容です。
↓詳細こちらに載せてます。
今回は、初心者でも迷わずWEBサイトを仕上げられるためのデザイン学習法をご紹介します。
またしても超特大ボリュームになってしまったので、読みきれない方はぜひ「スキ」や「フォロー」をしていただき後からお時間のある時にじっくり読んでみてください。
いざデザインを考え始めると、「どこから手を付けたらいいのか分からない」「デザインがまとまらない…」「しっくりこない」という壁にぶつかる人も多いのではないでしょうか。
WEBサイトのページデザイン学習で躓かないためには、スムーズに進められる工程とポイントを押さえておくことが大切です！
模写から始めよう
デザイン初心者の方は、まずは他の方のデザインを模写してみると良いです。模写をすることで、デザインの基本的なレイアウトや配色のルールを学ぶことができます。
模写を通して学ぶこと
どの場所にどんな要素が配置されているのか
色の組み合わせやフォントの使い方
スペースの取り方や余白の重要性
ツールに慣れる
ツールの使い方を覚えるためにも、模写は効果的です。既存のデザインを真似ることで、ツールに慣れつつデザインを作る感覚を養えます。
実は、私はあまり模写をしませんでした！私が通ったオンラインスクールではPhotoshopでオリジナルデザインを作る課題がありましたので、模写を経験することなくいきなりオリジナルに挑戦したのです。
そして、以前所属していたコミュニティで勉強会をすることになった時、初めてFigmaを使ってデザインをしたのですが、操作方法はもちろんのこと、要素の配置のルールや整えるべき数値がわからずに苦労しました。Photoshopでのバナー作りは経験がありましたが、勉強を進めていくうちに、サイトのデザインはバナーとは全然違うということに気が付きました。コーディングすることを考慮して制作する必要があるからです。
ですので、今からページデザインの学習を始める方は、ぜひ模写を先にやって欲しいと思います。
↓SAMURAI ENGINEERさんが模写の必要性や手順をわかりやすく解説してくださっていました。
最初はシンプルなデザインでスタート
模写ができるようになったらシンプルなオリジナルデザインを作りましょう。
初心者が陥りがちなのは、最初から凝ったデザインを目指してしまうことです。
私も、一番最初にデザインカンプを作った際、ちょっと凝ったことをしてしまったお陰で見事に自爆しました！コーディングするのにとっても苦労しましたし、「向いてないのかも…」と心が折れかけ、そこからサイトデザインから足が遠のいてしまいました。
そうならないためにも、最初は以下を意識すると良いと思います。
レイアウトはシンプルに
コーディングすることを思い浮かべて自分で実装できるか考慮して作る。できるかわからない場合は、そのデザインを採用する前にどうやって実装するのか調べてみる。色は2〜3色に絞る
ベースカラー、メインカラー、アクセントカラー(※テキストカラーは別)に限定することで統一感を出す。カラフルな色をバランスよく使うのは難易度が高い。フォントは1〜2種類
読みやすいフォントを選び、最初は見出しと本文のサイズに差をつけるだけでもOK。
企画構成と同時にトンマナを決めよう
オリジナルデザインを作る前にしっかり企画構成を練りましょう。
↓企画構成については前回の投稿をご覧ください。
それと同時にトンマナを決めることでデザインに迷いが減ります。
「トンマナ」とは「トーン&マナー」の略で、デザイン全体の雰囲気や方向性を指します。
トンマナをまとめたイメージボードを作っておくことで、後でデザインの細部を調整する時に迷いにくくなります。
トンマナを決める際のポイント
ターゲットを意識する
ターゲットユーザーに合った色味や雰囲気を決める。(明るくポップならパステルカラー、大人っぽい印象なら落ち着いたトーンなど)コンセプトを固める
シンプル、洗練、カジュアルなど、方向性を決めておくと迷いがなくなる。イメージを可視化する
Pinterestなどで参考にするサイトやパーツを集めてフォルダに入れておいて、それを参考にイメージボードに落とし込む。
私流イメージボードに載せておくべき事柄
使用する色のサンプルとカラーコード
長方形に色をつけて並べたり、どのパーツに使用するのかメモを入れる。サンプル画像
イメージに合うサイトやパーツの画像を集めておく。フォントのサンプルとフォントサイズ
デモテキストを入れて見出しと本文のサイズ感も分かるようにしておく。余白
見出しと本文の間やセクション間の余白が可視化できるようにテキストや画像を並べてみる。
イメージボードは色々なツールで作れますが、私はFigmaでワイヤーフレームやデザインカンプを作るのでイメージボードもFigmaで作ります。ワイヤーやカンプを作るツールで作るのが効率が良いと思います。
ただ、操作に慣れるまでは簡単にCanvaでもOKかと思います。私も最初はCanvaで作っていました。
ワイヤーフレームの作り方と具体化のコツ
いきなりデザインに取り掛かると、配置を決めながら同時に色や余白などを整えていくため時間がかかり非効率なので、先にワイヤーフレーム(設計図のようなもの)を作ります。
ざっくりと大枠を描く
この段階では手書きでもツールをつかってもOK。どのように配置するかだけ決め、まだ細かいデザインは意識しない。
※私は慣れるまで大中小の付箋を駆使して配置を決めていました！やり方はインスタで紹介していますのでぜひみてみてください。投稿URLはこちら▶︎デザインツールに移行し、だんだん詳細化していく
大枠が決まったらデザインツールで制作する方が後で楽。ブラッシュアップしながらボタンや画像の位置を決めていく。デザインカンプ制作に入る前に使用画像を集めておく
事前に画像など全ての素材を集めておくと、デザインカンプに落とし込んでいく際に毎回検索して探さなくていいので効率がいい。
※私は、Figmaのデザインボード内に素材置き場としてフレームを作り素材を並べています。ワイヤーフレームやデザインカンプの横に置いておけるので使うときに楽ちんです。
デザインカンプで完成イメージを固める
ワイヤーフレームができたら、次はデザインカンプの制作に進みます。
デザインカンプ制作は、完成形のデザインを作る工程で、コーディングの準備段階でもあります。しっかりここでイメージを固めておくことで、後の作業がスムーズになります。
ワイヤーフレームを複製して編集していく
ワイヤーフレームをもとに、コーディングを意識しながら具体的なデザインに落とし込んでいく。企画構成やイメージボードからコピぺして色や文字を入れていくと効率的。よく使うボタンやパーツはコンポーネント化して管理
ボタンやナビゲーションバーなど、よく使うパーツはコンポーネントとしてまとめておくと、効率的に作業できる。コンポーネント置き場を作って、まとめておくと再利用しやすい。最低でもPC幅とSP幅をデザインする
パソコンとスマホの両方でどう見えるかを意識して、デザインを作る。タブレット幅での見え方もこだわる方はをタブレット幅のデザインも作りましょう。余白を統一して視覚的に整える
余白がバラバラだとデザインが乱れて見えるので、全体の余白のバランス を考えて、均等に配置するよう心がける。余白の取り方でサイトのイメージが変わってくるので結構重要！レイヤーを整えて見やすくする
複数のパーツやテキストが重なるので、 レイヤーを整理しておくことが大事。名前をつけて管理したり、グループ化したりすることで、後で修正する際にもスムーズに作業できる。
ここまでできたら実際にコーディングしてみよう
コーディングに進む前にデザインカンプを最終チェックしてみましょう。
コーディング前のチェックポイント
企画構成はしっかりできている？
迷子にならないサイト構成になっているかデザインのトンマナは統一されている？
色・フォント・ボタンのルールがバラバラになっていないかコーディングしやすいデザインになっている？
不必要に複雑なレイアウトになっていないか
ここまでクリアできたら、最初に学習したコーディングの知識で実装します。
わからないことは検索したり学習し直したりしながら進めれば、最初は思った通りにいかなくてもOK。試行錯誤しながら手を動かすことが成長のポイントだと思います。
うまく表示できなくて悪戦苦闘した箇所が実装できた時の喜びは、努力し試行錯誤した人にしか味わえないですし、何もないところから自分で作り上げたWEBサイトはあなたにとって特別なものになります。
全部できなくてもいい
「餅は餅屋」と言いますように
ここまで「コーディング」→「企画構成力」→「デザイン」の順でWEBサイト制作の学び方をお伝えしてきましたが、お仕事をする際は苦手だな〜と思った工程は得意な方に外注してもいいと思います。
私も正直に言うとデザインがあまり好きではありません。性格上、深く考えてこだわり過ぎてしまうので、効率が悪いです。ですから、デザインの部分だけをデザインが得意な信頼のおける仲間に依頼することもあります。
ただ、どの工程もWEBサイトを制作する上で外せませんので、外注するにしても知っておく必要があります。
信頼できる人に依頼するために
外注する方法はクラウドソーシングやSNS募集など色々ありますが、相手がどのような人か、自分と合うか分かりません。知らない人よりもスキルも仕事に対する姿勢もよく知っている信頼できる仲間に頼めたら安心ですよね。
仲間と共に自分たちの失敗を活かして立ち上げたWEBサイト制作学習コミュニティMamskiには、WEB制作を学びながら、同じ目標を持つ仲間とつながれる環境があります。
実践的な学びでスキルアップ！
仲間と一緒に成長できる！
学びながら信頼関係が築ける！
「学ぶ」「つながる」「仕事につなげる」—— Mamskiで一緒に成長できる仲間を見つませんか？
※価格は今後変わる可能性があります。