Lesson3 3. サイト設計
目的とターゲット、前提条件が明確になったところで、サイト設計に落とし込んでいきます。今回のポートフォリオサイトを通じて「自分の実力と実績、そして自分自身の人間性を知ってもらい、採用してもらう」ことがサイトのゴールとなります。それでは、ここからポートフォリオサイトに必要な情報を用意して、デザインについて考えていきましょう。
3.1 必要な情報のリストアップ
- 自分のプロフィール（経歴や得意なこと、アピールできること）
- デザインの制作実績
- あなたのスキル
- お問い合わせ
より詳細に
| 項目 | 内容 |
|---|---|
| 自分のプロフィール | 前職の略歴とWebデザイナーになるまでの経緯、学んだこと、将来の目標 |
| 実績 | ぬるま湯塾でのポートフォリオサイト、カリキュラム内で行ったWebサイト制作、coconalaでの実務実績、バナーデザイン、ヘッダーデザインなど |
| 現在のスキル | HTML/CSS JavaScript勉強中、WordPress勉強中、Web以外のスキルも合わせて |
| 連絡先 | メールアドレス、LINE、チャットワーク |
必要な情報は一度全てをリストアップしたところで、取捨選択していきます。無意味に情報が多くなるとわかりずらいサイトとなってしまい、ターゲットがユーザーが確認したい情報に辿り着けなくなってしまいます。
3.2 サイトマップ
サイトに必要な情報が出揃ったら情報を分類・グループ化して優先順位をつけ、組織化します。この組織化したものを見やすくするためにサイトマップを作るのですが、今回は1ページだけのサイトで、掲載する内容も、必要な情報も少ないため、ここではサイトマップ制作は省略しワイヤーフレーム制作へと進みます。
3.3 ワイヤーフレーム
ワイヤーフレームは、ページの設計図となるものです。リストアップした必要な情報を元にしたコンテンツをページのレイアウトへ落とし込んでいきます。サイトマップ制作までの準備がきちんとできていれば、コンテンツの内容や優先順位もしっかりと決まっているので、レイアウトしやすいはずです。今回は1ページ分だけですが、複数のページがある場合はすべて書き出しておきます。トップページ、サブページ、フォームを設置するのであればフォーム内容や確認画面、サンクスページなど、ページが多ければ多いほど大変な作業になりますが、曖昧にしておくと後で制作する際に出戻りが多くなってしまいます。スマートフォンへも対応したレスポンシブデザインにする場合は、そのことも考慮したワイヤーフレームを作成する必要があります。
ここでは、既に完成されたワイヤーフレームを見てどのようなものかさえわかれば、問題ありません。
まずは手描きでワイヤーフレームを描くことが多いです。もしここで足りない要素に気づいたり、優先順位がはっきりしない場合は必要な情報のリストアップやサイトマップ制作に戻ってもう一度確認してみます。
手描きでのワイヤーフレームが完成したら、実際に入る写真やアイコン、テキスト部分は原稿に近い内容ものを準備しておくと、よりイメージしやすくデザインカンプに起こす時も楽になります。慣れてきたら手描きではなくそのままツールを使って制作していくことで、よりスムーズな制作に繋がっていきます。
シングルカラムレイアウトの特徴
シングルカラムレイアウトは左右にサイドコンテンツを持たず、情報を上から下へと垂直に配置するシンプルなレイアウト手法です。モバイル端末でも同じレイアウトで提供できるため、レスポンシブWebデザインにも対応しやすいレイアウトと言えます。シンプルなレイアウトはマルチデバイス化を見据えたデザインがしやすく、情報の優先順位がユーザーに伝わりやすいため、ユーザーの興味が他に逸れることなくコンテンツをしっかりと見てもらえることなどメリットがたくさんあります。
シングルカラムレイアウトで気をつける点は情報量が多いと縦に長くなりやすく、コンテンツは上から下へと配置されるため、ページ上部にユーザーの求める情報・惹きつけるコンテンツがなければ、ユーザーはスクロールすることなくページを離脱してしまう可能性が高くなるでしょう。もちろん他のレイアウトでも同じことが言えますが、シングルカラムの場合は特に重要視されるため、情報の整理をきちんと行い、コンテンツの優先順位を決めなければなりません。あとは運用後の解析にも関わりますが、どのコンテンツが一番上にあると離脱率が低いかなど、ユーザーの動きを分析しながら順番を変えたり、情報設計の部分から考え直すこともあります。
またシングルカラムはコンテンツの幅が広くなりすぎないように気をつけましょう。コンテンツの幅が広いと横方向への可読範囲が広がり、目の横移動が大きくなることでユーザーが疲れてしまいます。文章を段組にしたり、幅を適切なサイズにするなど、デザイン上での配慮を行いましょう。
最近はマルチカラムレイアウト（左右にコンテンツがあるレイアウト）よりシングルカラムレイアウトを採用しているサイトの割合が多く見られます。
3.4 配色
ページのレイアウトまで決まったら、次はサイトの配色を考えます。ここでもターゲットユーザーを参考にしましょう。今回のターゲットユーザーは30代から40代の男性。制作会社の採用担当者です。まずはこの人に、Webサイトを通して好印象を持ってもらわないといけません。一番重要なのは信頼感です。重要なのは受け取り手にどんなイメージを持ってもらうかという事です。
ここでLesson2で学習した配色の割合を思い出してください。
- ベースカラー 70%
- サブカラー 25%
- アクセントカラー 5%
この割合を元に色を決めていきます。
最初にアクセントカラーを決めましょう。アクセントカラーは自分をイメージさせるような色にします。男性なら信頼感の増す紺やグリーン系、または思い切って赤や黄色系でもいいかもしれません。女性であれば柔らかいイメージのパステルカラーや暖色系の色、男性的なデザインが得意であれば黒やグレーなどの落ち着いた色など、ここは自由で構いません。
次にベースカラーを決めます。今回は明るく清潔感のあるイメージを持ってもらいたいので、ベースカラーはアイボリーに決めました。真っ白だとかっちりと真面目すぎる印象になるため、少し温かみのある色に寄せて、親しみやすくします。
最後にサブカラーを決めます。サブカラーはベースカラーで選んだ色を補うような色にします。ベースカラーと同色系であれば落ち着いた印象に、異なる色を使うと動きのある印象になります。今回はベースカラーとキーカラーを元にAdobe Color CCを利用してサブカラーの色を決定しました。
配色に悩んだときは、「イケサイ」などのまとめサイトから配色を探していくとイメージしやすくなります。特に今回のようにアクセントカラーとベースカラーが決まっている場合には便利です。同色系でまとめたい場合は「類似色」や「モノクロマティック」「シェード」、メリハリをつけたいときには「トライアド」や「補色」「コンパウンド」で選んでみるといいでしょう。上部メニューから「探索」をクリックすると様々な配色のパターンを見ることができます。
Lesson2でも紹介した配色ツールやカラーコードを提供しているサイトです。
配色
- ベースカラー：#fdfcf6
- サブカラー：#bea300
- アクセントカラー：#14c0c9
配色は必ず3色でなければいけないという決まりはありません。あまり色を増やしすぎるとまとまりがなくなるため、増やす際は色数は少なく、なるべくサブカラーやベースカラーに近い色にします。
3.5 Webフォント
今回は見出しなどで使用する欧文フォントのみにWebフォントを使用していきます。Webフォントを使用する場合は読み込みにかかる時間にも注意しましょう。サイズの大きな画像を表示させると時間がかかるように、Webフォントも多用したりファイルサイズの大きなWebフォントを読み込ませると時間がかかります。ターゲットユーザーの回線速度の設定に関わらずモバイル回線や災害時の回線混雑なども想定し、なるべく重たくならないように配慮しましょう。
ただ、最近では回線状況の進化により、速度が早くなりどこにいても読み込みが遅くなってしまうことが少なくなりました。
それでもフォントの種類を多数使用するなど、重たくなるようなことをしてしまうと読み込みが遅くなるので、使いたいフォントのみを使用することや読み込むスタイルの数を減らすなどして対応しましょう。
Google Fontsは欧文だけのWebフォントサービスですが、和文でのWebフォントサービスもあります。和文のWebフォントサービスは有料のサービスが中心ですが、様々なフォントが提供され充実しています。もし和文でのWebフォントも使ってみたい場合は参考にしてみてください。