【基本編】WEBデザインの基本用語 今日の5ワード

このエントリーをはてなブックマークに追加




まめしば
 こんにちは。まめしばです。
 ここのところ時事ネタが中心でしたので、話題をWEBデザインのほうに
 戻していきたいと思います。
ぶるさん
 お疲れ様、まめしばくん。
 確かにここ最近時事ネタが連続してたね。お笑い好きのまめしばくんの気持ちも
 わからんでもないけど、ブログ記事の内容としては私見が強すぎたかもね。。。
まめしば
 はっ(;’∀’) その声はぶるパイセン! !
 ご指摘ありがとうございます。もう一回初心に立ち返って、
 WEBデザイナーを目指す方に役立つ情報発信って何だろうって考えてました。
ぶるさん
 なるほど、それでWEBデザインに関する用語を定期的に紹介していくコンテンツを考えたんだね。
 素晴らしい!

ということで、当初のブログの方向性に戻って、WEBデザイナーを目指す方向けに、
用語の紹介・簡単な解説を定期的に5個ずつくらいに絞って紹介していきたいと思います。

あまりにもボリュームがあると、一気に覚えるのも大変だとおもいますので、小刻みにをまめしばのブログみながら移動中や空き時間にちょっとずつインプットしていくような感じで活用いただければと思います。

もしくは、もうすでに覚えた、知っているという方は、改めて再確認や復習目的で目を通してくださってもよいかと思います。

■ 今日の5ワード ■

  1. サイトマップ
  2. ワイヤーフレーム
  3. デザインカンプ
  4. プロトタイピング
  5. レスポンシブ

■サイトマップ

WEBサイトの構想が固まってから作成する設計図のことです。サイトマップでクライアントと制作者の間でイメージを共有します。サイトマップの作り方は特に決まりはなく、パワーポイント イラレ 手書きでもよく、内容が正しく表記されていれば問題ないとされることが多いようです。

*参考イメージ

■ワイヤーフレーム

ワイヤーフレーム(通称:ワイヤー)は1ページ内の情報を具体的に共有するための資料になります。
画像の配置やテキストの配置、ボリューム ボタンの配置など。イメージに近い形名のページごとのレイアウトイメージといった資料になります。大方直接クライントとやり取りしているデザイナーさん、もしくはディレクターのお仕事というイメージが強いですね。

*参考イメージ

■デザインカンプ

デザインカンプはサイトマップ、ワイヤーフレームでイメージ共有後、完成形のイメージとして起こす資料のことです。
デザインカンプはあくまで完成形なので、多くのデザイナー、ディレクタ-はPhotoshop1やillusttatorで実際の素材を組み込んで作成します。

また近年ではパソコン以外のデバイスが多種多様化しており、特にスマホ対応(レスポンシブ)についてもデザインカンプを作成する必要があります。

youtubeでphotoshopを利用したデザインカンプの作り方を解説されている動画がありましたので
ご紹介しておきます。よければこの動画でイメージを高めて、本や実践で深堀していくのがよいかと思います。

■プロトタイピング

デザインカンプが決まり、サイトの構築に入る前に可能であれば、プロトタイプを作って検証する必要があります。
よくアニメやSF系の映画でも「これはプロトタイプだ」とか「それはプロトタイプだから保証はできないぞ!」みたいな会話を聞いたことがあると思いますが、まさに試作機、試作の意味合いになります。

プロトタイプを検証する上でよく使われているアプリケーションは「AdobeXD」です。
ここ近年特にデザイナー界隈では浸透率が高いツールになります。

★AdobeXD でサイトマップ→ワイヤーフレーム→デザインカンプ→プロトタイピングが効率的に提示、共有可能に。
 操作説明されているサイトもあります。(下記) また動画で検索されても紹介動画などありますので、気になる方はぜひ一度しらべてみてくださいね。

■レスポンシブ

レスポンシブという言葉を解説する前に「モバイルファースト」についても触れておく必要があります。

 ★モバイルファースト 

 現代ではスマートフォンの普及に伴い、WEBサイトを利用するユーザーはPCだけでない、むしろPCよりもスマホからのアクセスが基本になっている為、スマホで見ていることが前提であることを念頭にサイトの設計をしようという考え方です。

たとえば自分の生活に置き換えても、
  どこか行くのに地図を調べる → スマホ
  近くの居酒屋を探す、飲食店を探す → スマホ
  電車の時刻を調べる 乗り換え案内を見る → スマホ
  SNSの確認 → スマホ
  動画を見る → スマホ
  メールの確認・返信 → スマホ
  ニュースの閲覧 → スマホ
ともう欠かせない存在になっています。


レスポンシブ (レスポンシブウェブデザイン)とは、このようなWEBサイトを見る端末(デバイス)や利用環境の変化に伴い、同じサイトでもPCとスマホでそれぞれ見やすい形に切り替えて表示するデザインのことを指します。

制作現場では、「レスポ対応」とか「今までレスポではなかったがレスポ対応にする」といった感じで使われています。「

【ワンポイント】
WordPressで作成したサイトは自動でレスポンシブ対応になります。
ほとんどのテンプレートがレスポンシブ対応になっていることで有名です。

■最後に

WEBデザインを習得していくに当たり、基本的な用語紹介と解説でした。
今回は第1回ということで、これからも定期的に記事にまとめていきます。
またWEBデザイナーを目指す方向けのおすすめサービスも紹介していますので、ぜひ覗いてみてください。


これも一つ一つ積み上げですね。お役立てになれば幸いです。

まめしば



LINEで送る
Pocket

Leave a Reply