iSara7thの事前学習でXDを使ったデザイン模写があります。

この課題のレポートについて、ブログで提出OKとのことなのでここにまとめます。

ヘッダー部分の共通点、特徴

  • ヘッダーに入る項目はロゴ、メニュー(内部リンク・外部リンク)、言語切り替え、検索ボックスが多い
  • メニューの文字は一行に収まるようにしている文字数にしている
  • 高さは70px〜情報量が多かったりする場合は100px以上
    ただ追従などさせるなら150pxを越えると大事なコンテンツが隠れてしまうため、スクロール時はjsなどで高さを変えているサイトが多い
  • ロゴは圧倒的に左寄せが多かった。

 

ヘッダーはサイトに訪れた人が「ホームページの全体像」をわかりやすく伝えることが大事で
配置など意識して行うことが大切。

コンテナ(全体の内容が入る幅)のサイズ

コンテナの幅は1100px前後が多い。
このコンテナ(表示領域)を決めておくことによって、PCの画面サイズによるレイアウトの崩れがなくなるので非常に重要。
画面サイズが1900pxでも1300pxでもコンテナを1080pxと決めていればレイアウトが崩れる心配もない。
ユーザーにとって見やすいサイトになるし、コーダーにとってもコーディングしやすいデザインと言える。

画像の共通点、特徴

画像については正方形もしくは横長の長方形が多い。
模写したもので縦長画像は一つもなかった。
XDを利用する際は、縦横比率が崩れないようShiftを押しながら変形をすると良い。

色の特徴(比率、このジャンルにはこの色など)

WEBデザインの配色では3つの色が役割別に使われる。

  • ベースカラー 70%
  • メインカラー 25%
  • アクセントカラー 5%

ベースカラー

最も面積に使用される色で、余白や背景などに用いることが多い。
メインカラーの明度をあげた色や、色やグレーなどの明度の高い濁色を選ぶと良い。

メインカラー

デザインのテーマとなる色。
一番主張したい色をメインカラーにする。

アクセントカラー

注目されたい箇所に使う色。
メインカラーの反対色を選ぶと鮮やかさが際立って目立つので良い。

 

コーポレートサイトや病院のサイトなどは「清潔・知的・安心」の印象を与える青系が良い。
「元気・明るい・活発」などはオレンジ系にすると良い。

テキストのサイズ、間隔、文字数の共通点

▶︎文字サイズ
ファーストビューに使われているサイトの中で一番大きい文字は60〜70px前後が多い。
h2などのタイトルは22〜35px、文章として使われる文字数は14px〜18pxが読みやすいと感じた。

▶︎文字間隔
文字間隔は10px〜20pxが読みやすい。
タイトルは文字間隔が調整されていて、文章は0pxなどのサイトがあった。
メリハリがついて見やすいと感じたので、文字間隔は細かい点だが非常に重要。

▶︎文字数
タイトルは1行もしくは2行までが読みやすい。
文章は多くても7行にして、出来るだけ長文にならないようにすることが大事。
伝えたい情報を簡素に書くほうが読み手には伝わる。

フッターの共通点、特徴

フッターに入る項目はロゴ、メニュー(内部リンク・外部リンク)、SNS情報、コピーライトなど。
ヘッダーに入らないメニューはフッターに載せる。
サイトの全体像をヘッダーより詳細に記載することでサイト内で迷子にならない。

セクション間の縦間隔の特徴

各セクション60px〜100pxの間隔があり、全てのセクションで統一されていることが多い。
これは初めての現場で注意されたことだが、同じクラス名をつけて各セクションごとに同じ間隔を開けると良い。
そうすることでサイト全体に統一感が出る。

セクション内の要素の横間隔の特徴

セクション内の要素の横間隔は、20〜40pxずつ空いていることが多い。
2カラムの場合だと80pxくらい空けた方が余白が作れて綺麗に見える。

2カラム、3カラム、4カラムの時の1カラム分の幅の特徴

2カラムの場合は幅550px〜650px、3カラムは350px〜400px前後、
4カラムの場合は260px〜320pxが多かった。

コンテナサイズによって前後するが、大体50%/30%/25%で調整するのが良さそう。

その他気づいたこと

  • ファーストビューは縦700〜800px前後で作られていることが多い
  • 要素に丸みやシャドウをつけるとサイト全体の印象が柔らかくなる
  • 今回模写したサイトはゴシップ体が多かったが、高級感や和風、大人っぽい印象を出すには明朝体が向いてる

共有したいこと

使って便利だったXDのプラグインを紹介します。

▶︎Ikono
フリーアイコンサイトの「ikonate」のプラグインで、素早くアイコンを選択・設置できます。
簡単なアイコンをわざわざ作ったりダウンロードしに行ったりするのは面倒だったのですごく便利です。

▶︎Remove Decimal Number
図形などをリサイズした際、いつの間にか出た小数点を整数に直してくれます。
いちいち手で直さなくていいので割と重宝しています。

 

 

ただ模写するのではなく、上記項目に意識するだけでいろんなものが見えてきます。
他サイトを訪問した時も「このサイトはどうなってるんだろう?」と気になり見る癖がつきましたし、
デザインは苦手と思っていましたが、ある程度法則があってそれを守っていたら形になるんだと実感しました。

いろんなサイトを比較して研究することは基本中の基本ですが、
何を意識するかによって、レベルアップの速度は大きく変わりますね。

おすすめの記事