模写レポート

デザイン模写を6つしてみてのレポートです。

1.任天堂:サイトの配色がゲームの箱を彷彿とさせる。アクティブな印象。
2.いとう養鶏場:クリーンさと柔らかい人柄の伝わるサイト。
3.日本コンクリートこう工業株式会社:爽やかで信頼感を感じる。
4.BASE:パッと見おしゃれな雰囲気を感じるシンプルなサイト。
5.三井物産株式会社:白ベースでクリーンなイメージ。
6.メールワイズ:イラストが使われていて堅苦しく感じない。

ここからはデザイン初学者による学習メモです。
(この記事の内容は私の推測による書き込みも多いです。ご了承ください。)

スポンサーリンク



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

高さ:75、210、100、72、112、124

  • 100px前後のヘッダーが多く、見やすく感じた。
  • 210pxのヘッダーはトップページではトップ画像下に配置されていて上手くまとまっていた。
    →悪目立ちしないように?

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

コンテナ幅:1120、1000、1220、960、1220、1171

  • 情報量が少なくシンプルなデザイン性のあるサイトでは左右の余白が多く取られコンテナ幅は狭く、逆に企業など情報量が多いサイトの方がコンテナ幅は広かった
  • 同じページ内でもコンテナのサイズがセクションごとに違うサイトがあった
    →セクションの間にスライダーが入ったりしていると違うセクションだということがわかりやすくメリハリがあった。

画像の共通点、特徴

  • 6つのうち、4つのサイトのトップ画像が全画面表示になっていた
  • 環境への取り組みを行なっている企業のトップ画像には森などの写真が使われていた。
    →内容を見ていなくても、環境に配慮した取り組みを行なっている会社なのかとわかるデザインだと思った
  • サービス販売のサイト内にイラストが使われていると使用が簡単そうに見えてサービスの導入へのハードルが下がりそうだと思った。

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

  • 色は基本の色が3色(ベース70〜80%・メイン15〜20%・アクセント5〜10%)
  • 企業などの信頼感をもたせたいサイトのアクセントカラーは青系
    →装飾にカラーが使われていない企業のサイトでも画像で青系の写真が使われていた
  • 柔らかい暖色系を使うと優しい雰囲気
    →親近感をもたせたい時などにもいいのでは?
  • おしゃれだなと感じたサイトではトップの写真の色合いとコンテンツに使われている色合いが統一されていた
  • アクセントカラーはボタンなどによく使われていてリンクがわかりやすくなっていた

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

見出し:25〜50px
本文:14〜16px
補足的な内容(ラベルや英字タイトルなど):10px〜12px

  • 文字サイズに関してはかなり細かく設定されているサイトもあった。
    →基本的に一番大きいのが見出し、それ以下見出しを基準に小さくなっている
  • 英字の場合は日本語より文字間隔を多く取らないと横に広くならないので、広く取られている

フッターの共通点、特徴

  • 今回模写した全てのサイトで灰色、白、黒などのシンプルな色がよく使われていた
    →メインの情報よりも地味にしている
  • 5つのサイトで内容が左寄せで整列しており、中央寄せは1つのみだった

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

  • 60〜150px程度の間隔が空いている
    →特にフッター前の間隔が他より若干広めにとってあることが多い
  • 情報量が少ないサイトでは300px程度空いている部分もあった
    →間隔が広く空いている場合は途中で背景色が切り替わっている

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

  • 20〜50pxほど離れているものが多く見られたが、その中でも関係性のあるものは近くなっていた。
  • リンクメニューだけを見たときに余白が広めに取られている(40〜60px)ところもあった
    →メニューの見やすさや押しやすさなども関係しているのかと思った
  • 画像の多いサイトでは余白あり4カラムと余白無し2カラムで画像の表示をサイト内で変えていた
    →単調にならないように?

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

  • 均等(100%÷カラム数)に配置されているものがほとんど
    →見やすさや選びやすさ向上?
  • サイドバー込みの2カラムの場合サイドバーの割合がメインに比べ低い
    →メインの割合を大きくすることで見やすく直感で重要な項目を理解しやすい
  • レスポンシブ でのスマホ表示の時は1カラムでコンテナいっぱいに広げて表示している(横の余白は15〜20px程度)

今回の模写を終えて(気づき・シェア)

  • 重要ではない情報の取得に多くの時間をかけてしまった部分があった。
    →どの情報がどうして必要なのかを考えるべき
  • ショートカットでの効率化、クロームやXDのプラグインなど、使えば作業時間を短縮できるものは利用する
  • XDのチュートリアルに載っている以外の細かい機能ももっと見つけて使いこなしていきたい(グラデーション、ぼかし、影などなど)
  • 模写をしていてだらけてしまった時は、次の課題を確認して自分でデザインをしなくてはいけないという現実感を持つと作業に身が入る。

この記事を書いた人

みき

みき

1990年生まれ
カナダ暮らしWEB系フリーランス

楽しみのない毎日に萎え|勢いで2016年カナダワーホリ|その後アメリカ生活・バックパッカー→カナダ移住|リモートワークの重要性を知る|プログラミング学習開始から4ヶ月初収益10万円|海外生活/旅/英語ネタ/フリーランス1年目の生活について綴ります