デザインラフ

作品紹介（訓練学校）
2025.04.09

ワイヤフレームを『デザインラフ』として仕上げて、実際のwebページの見た目を再現しよう！

デザインラフとは

ワイヤーフレームの段階でしっかりとレイアウトを行っていれば次の作業である『デザインラフ』『コーディング』の時短になる。
レイアウトの基本は面積の取り方。目立たせたいものほど大きな面積が必要。余白も取ることも忘れずに。

デザインラフ（デザインカンプ）：コーディングを知らない人に見せるもの。HTMLとCSSでコーディングした時と同じ見た目の再現を作成する。デザインラフをクライアントに見せて、OKを頂いたらコーディングを行う。
デザイナーとは、クライアントの頭の中のイメージを具現化するお仕事。「デザインラフ」は必ず２提案以上作って、徐々に目的に寄せていく、理想に近づけていく必要がある。

コーディング：「デザインラフ」の見た目をそのまま形にする作業。コーダーにはデザインの再現力が求められる。

コーディングに向けて

以下の順番を意識して、デザインを考える。

  1. 画像サイズ：特に理由がなければ【1280px】を画面サイズの基準として、【960px~980px】をコンテンツ幅にすると無難。
    ※ECサイトの楽天市場やヤフーショッピングの推奨サイズは960px~980px
  2. 見出し ( h1~h6 )
  3. 段落 ( p )・リスト ( ul li ol li ) などの構成
  4. 画像 ( img )・リンク ( a )・強調 ( strong,em ) などの構成
コーディングの下準備
  • 画像にするのか、テキストにするのか
    →画像よりテキストの方がSEO対策に有効。CSSで実現可能なデザインであれば、積極的にCSSで表現する。
  • 画像文字にするのか、テキストにするのか
    →ロゴなど、フォントが変わってしまうと支障があるものは画像文字にする。
  • HTMLなら ( img )、CSSなら ( background )
    → ( img ) はHTMLなので、文法として意味が必要。
    　 ( background ) ならCSSで文法としての意味は必要無い。
  • テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる
    →webページを重くするのは画像。SEO対策として、ページが表示されにくいのは避けたい。
  • 実はセクショニングは後回しでも良い
    →セクションを意味するタグ ( header,nav,maiｎ,section,footerなど ) を考えるのは、後回しでも大丈夫！　ヘッダー等はあまりSEO対策に関係しない。
    ※セクションを意味するタグはHTML５からの登場で、それ以前は全て「div」だった
  • リテイク（修正・出戻り・やり直し）に強いデータにしておく
配色のポイント
  • 配色はデザインラフですべて決定する。コーディングをしながら変更しない。
  • カラーの表記を統一する
    →16進数　例：#ff0000)
    　RGB　　例：rgb(255,0,0)
  • 透過表現方法について、RGBAか、PNG画像の利用かを決定する
    →透過表現は、CSSで【例：rgba(255,0,0,0.7) 】という記載方法が使える。
    画像そのものを透過させる方法として、PNG画像を利用する方法もある。

デザイン知識

フォントの歴史

  • オールドタイプ：Webサイトの歴史よりも印刷業界の歴史の方が長い。webに対応されてなく、使い勝手が悪いこともある
  • バンドルフォント：パソコンやスマートフォンに初期インストールされているフォント
  • プロポーショナルフォント：太字、細字などの切り替えができる
  • Webフォント：指定フォントがインストールされていないパソコンでも、インターネット接続があれば表示できる。通信環境に左右されるため、バンドルフォントを使用したほうが良い場合もある

※WEBフォントでの使用は再販不可という点に気を付ける
自社サイトでWEBフォントを使う分には問題無いが、その企業が受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反。
※受託制作したサイトでWEBフォントを使う場合
サイト所有者用に別途 Adobe Creative Cloud のサブスクリプションライセンスが必要。

おすすめフォント

  • Noto：世界中の言語をサポートすることを目標にGoogleがAdobeと共同開発した。言語翻訳に対応。【 Noto Sans 】【 Noto Serif 】
  • 小塚：Adobe製品のバンドルフォント。
    オールドタイプでもあるのでweb上でのデザイン性△な時もある
  • メイリオ：WindowsVistaのバンドルフォント。web用に開発された
  • MS：デザイン性△
  • ヒラギノ：有料フォント。デザイン業界でよく使われている

配色テクニック

  • イメージカラーを使う
    webページのイメージを大きく左右するメインカラーは一番初めに決める。ロゴのカラーをメインカラーに使用しているサイトも多い。
  • 真っ黒（#000）を避ける？
    純黒は目が疲れるため、【真っ黒#000(Black)】は使用しないことが多い。ただし、昨今の各デバイスのモニターは、目にやさしくなるように色みを微調整する機能があるため、【真っ黒#000(Black)】を使用する場合もある。
  • 色を使いすぎない
    【無彩色：白・灰色・黒】を上手く活用しよう。
  • 美しい配色バランス
    3色の組み合わせがおすすめ。基本カラー3色を【70%：25%：5%】の比率（色の黄金比）にして配色するとバランスが良い。

おまけ　WEBサイト制作について

LPとWEBサイトの一番の違いは、単一ページなのか？複数ページなのか？という点。
WEBサイトは複数ページの集合体となるため、より複雑なストーリーを考える必要がある。

WEBサイトで必要なものは以下の通り。

  • サイトマップを考える
    【トップページ】【会社概要】【お問合せ】【アクセス】など複数ページでのストーリーを考える必要がある。
  • グローバルナビを考える
    グローバルナビは最もクリック数が多くなる。安易にデザインしない。リンク設定も必要。
  • コンテンツを考える
    新着情報等、日々の情報提供ページがあると、リピーターが増える。日々のページ作りにはWordpressが使いやすい。
  • スマートフォン対策

作品紹介：ワイヤーフレーム途中経過

コメント

タイトルとURLをコピーしました