SHIGANAKUNAIrssTwitterFacebookSHIGANAKUNAIしがなくないデザイナーを目指す備忘録トップページ考察グラフィックデザイナーに知ってほしいWebのことグラフィックデザイナーに知ってほしいWebのこと2014.05.04考察DesignDTPWeb4グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。Webデザインを制作する際に知っておいてほしいことを挙げてみます。同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾(袋文字や影など)・字詰めなどのタイポグラフィが苦手です。画像とテキストは以下のように使い分けることになるでしょう。タイポグラフィで魅せたいので画像にする写真に文字を綺麗に乗せたいので画像にする更新頻度が高く、文章をコピペで差し替えるのでテキストにするSEOを考慮し、検索結果の上位に表示させたいのでテキストにする「基本的にはテキストで、印象的に表現したい場面は画像にする」と考えるとよいと思います。レイアウトの制限グラフィックデザイナーにWebデザインについて話を聞くと「四角で区切られている」とおっしゃいますが、これはhtmlが四角で構成されていることが理由です。htmlは文章構造を表現するものなので、レイアウトの自由度はさほど高くないのです。数年前に比べ多少自由度は上がりましたが、紙に比べるとできないことはまだまだたくさんあります。僕は「柔軟性のあるレイアウトであること」が大きな1つのルールだと思っています。一度に見える範囲の制限ポスターや雑誌は紙面のサイズが決まっているので掲載量に制限がありますが、距離を変えることで全体を一目で確認することができます。一方でWebサイトは1ページあたりのサイズに制限がありませんが、ディスプレイに収まらない部分を見ることができません。パソコンは表示の拡大縮小を行われないものです。画面サイズに対して要素が大きすぎるとページの構成や内容を把握しにくくなってしまいます。要素やフォントサイズはWebに最適化させる必要があります。雑誌はページをめくって次に進みますが、Webサイトはリンクボタンをクリックして次のページに進みます。1つのページに複数のリンクボタンを設置出来るので、閲覧者に対して様々なアプローチを行えます。制作側が望む通りに利用者がページを見てくれるとは限りません。複数のリンクボタンの中に優劣をつけつつも、ボタンだと認識できるようなデザインでなければいけません。閲覧者は必ずトップページから見てくれるわけではありません。Googleなどの検索サイトから商品詳細ページにいきなりやってくることもよくあります。「何の本かを知らずに途中のページから読み始める」という感じでしょうか。そのような場合でも「ここは何のWebサイトだ」と閲覧者に知らせるためのデザインである必要があります。動く動画を再生する複数の写真をスライドショーで見せるボタンにカーソルを乗せる色が変わるボタンをクリックすると新しい要素を出すスクロールするとさまざまな箇所が動くここで挙げたものは一例ですが、Webサイトでは様々な動きを表現することができます。動きをつけたい場合、どんな動きをさせるかデザインの段階から想定すると製作をスムーズに進められます。どんな動きでも完全に再現できるわけではありません。Webでどんな表現方法が可能なのか知っておく必要があります。デザイン終了後にすることWebサイトデザインが完了後、コーディング作業が控えています。コーディングとは、デザインされた画像をブラウザで表示出来るようにHTMLタグで構築する作業です。デザインデーターはjpegやpdfにしてしまえばどんな端末でもほぼ同じ見た目を再現できますが、htmlは閲覧者の端末・環境によって見た目が異なってしまいます。その違いを極力減らしたり、SEOを意識した作りにすることがコーディング作業者の役割です。ページの関係性、リンクボタンに認識、そして前述の「動く」やシステムとの連動を再現するのもコーディングによるものです。近年Web業界の技術進歩は著しく、Webサイト上で表現出来ることは日々増加しています。それに伴いコーディングに必要な時間も増加します。印刷と異なり、デザイン終了後に変更が入ることもよくあります。余裕のあるスケジューリングは必須です。納品後にすることグラフィックではありえないことですが、Webサイトは公開後でも手を加えることが一般的です。新商品の発売に伴い、情報の追加・変更・削除するとき作成したページを流用して他のページを作成するとき閲覧者の情報をもとに改善するときこのような場合に手を加えていきます。なかでも3番目はWebならではでしょう。情報を得ることができます。その情報を元に閲覧者の考えを読み解きキャッチコピーや文章・レイアウトなどを調整し、成約に繋がりやすくするための改善を日々行います。まとめるグラフィック業界は歴史が長く、作業工程がかなり確立されているように感じます。使うソフトウェアもIllustrator・Photoshop・InDesignとそう多くなく、古いバージョンに落として入稿という現状です。Web業界はまだ未成熟なため、新しい技術の出現とトレンドの流れが目まぐるしいです。Illustrator・Photoshop・Dreamweaverはスタンダードですが、負けず劣らずのソフトウェアが次々と登場しています。ソフトウェア・表現・運営方法...全てをマスターする必要はありませんが、覚えることがどんどん増えていくのでWeb制作に関わるというのは結構ハードなものなのです。WebのデザインはWebデザイナーに任せてもらいたいところですが、いろんな理由もあると思いますので...タイポグラフィやレイアウト妥協するWebサイトでどんな表現が出来るかを知る後の更新に耐えられる柔軟性をもたせるこの3つを意識することで、より良いWebサイトデザインに繋がるのではないかなぁと思います。分からないことがあるとき、気軽に相談できるWebデザイナーがまわりにいるとよいですね。追記(5/5)「Webデザインの基本ルール」といった内容の本は、発行が古いと現在の制作方法と差異がでていることがよくあります。購入される場合は、必ず発行日が新しいものを選んでください。しがなくないデザイナーを目指してWeb、DTP、映像編集、3DCG、VRとかやってます。1:22pmすいません記事とは関係ありませんが、RSSの配信はされていないのでしょうか?興味がある記事が結構見受けられるので、かかさず目を通したいと思っております。2:28pmありがとうございます。興味をもっていただいてうれしいです。近日中に全ページからフィード登録できるようボタンの設置を致しますので、とりあえずは下記リンクからご登録頂けますか。[...]返信をキャンセルする。-URLHTMLタグはご利用いただけません。SHIGANAKUNAIページ上部へ戻る。