現代的webデザイン論考

－ DTP・印刷分野も知るべき、今のwebデザイン －

東日印刷は、2017年7月7日(金)に第3回目のセミナーを開催した。

今回のセミナーは、webデザイン、グラフィックデザイン、日本語webフォントに精通し、現役で活躍している3人を招き、「現代的webデザイン論考 － DTP・印刷分野も知るべき、今のwebデザイン －」をテーマに、それぞれの観点から現代的webデザインについて解説、Adobeの最新ツールをwebデザインでいかにして使うかを紹介していただいた。

1.現代のwebデザインで何が起きているのか

第1セッションの講演者は、東京都心部で活動する現役のアートディレクターグラフィックデザイナーwebクリエーター広告・ブランディング コンサルタント、「web制作に関わる方のためのセミナーイベントCSS Nite」でも講演しているAZM Design 代表　生明義秀（あざみ・ぎしゅう）氏。

webデザインの歴史を振り返りかえると、モバイルブラウザでの閲覧数が年々増加して、現在ではデスクトップブラウザを逆転している。

このことから、あらゆる表示サイズ・解像度で対応するマルチデバイス対応や、モバイルデバイスでの閲覧を優先したモバイルファーストが重要になっている。

伸縮変形自由自在、解像度非依存、コンパクトなファイルサイズなどが求められるようになり、webデザインのトレンドであるフラットデザインを誘発した。

webブラウザ事情では、国内外ともにChromeが1位。IEも10以前は、ほとんど極小になっている。

デスクトップブラウザ(PC)自体がモバイルデザイスに抜かれそうなことからも、web制作者はパソコンではなくモバイルデバイス優先に頭を切り替えなくてはいけない。

これからのwebデザインはマルチデバイス対応で、モバイルファーストが求められることは間違いない。

2.グラフィックデザインから観る現代のwebビジュアルデザイン

第2セッションの講演者は、本業のグラフィックデザインのほかに、プレゼンのお手伝い、書籍の企画・執筆などデザイン系のエディター、さいたまDTP勉強会のイベント開催、「デザインのバリエーションや代案をくださいと言われてももう悩まない本。」の筆者樋口泰行（ひぐち ・やすゆき）氏。

グラフィックデザインやDTP、紙媒体から現代のwebビジュアルデザインを考察し、カラー、レイアウト、タイポグラフィ、インタラクティビティの四つのジャンル分けてサイトを紹介した。

カラー

フルカラーにこだわらず、使用する色を絞ることで差別化を生み出している。

レイアウト

グリッドを使ったサイトが多く、似てきてしまうが、繰り返すフレームをこだわって使うことで連続性が生まれ、同じサイトにいることを伝えていることができる。

タイポグラフィ

文字の大きさや行間を調整、フォントのカスタマイズ、書体と画像の統一性によりオリジナリティーを出すサイトの紹介。

インタラクティビティ

パララックスによる仕掛けや、視点を固定して予想ができる見せ方をすることで違和感なく操作しやすくしている。

3.日本語webフォント時代の到来

第3セッションの講演者は、日本語webフォントサービス「フォントプラスFONTPLUS」の普及のため、日本全国を飛び回っている。ソフトバンク・テクノロジー株式会社 webフォント エバンジェリスト関口浩之（せきぐち・ひろゆき）氏。

1990年代は通信速度が遅い、HDD、メモリ容量が少ない、WindowOS/MacOSの搭載フォントが少なかったことなどから、webの世界ではフォントは置き去りにされた。

しかし、現在ではCSS3でwebフォント仕様が定義され、どんなブラウザでもwebフォントが表示できるようになった。

webフォントを使うことで全てのデバイス環境でフォントの統一表示が可能となる。

また、今まで画像データだった文字をwebフォントにすることで、alt属性の説明をする必要がなくなる。

webフォントを絵の具に例えるのなら、従来の絵の具とは違う、新しい絵の具である。

日本語は1書体で6000～20000文字と文字数が多く、データが重くなるのではと懸念があるが、FONTPLUSでは必要な文字だけを取得することにより、高速化を実現している。

webサイトにおける文字の占める割合は95％以上である。

文字は人の心を動かすブランディングの重要な要素であり、webフォントはwebサイトの価値を高める新しい絵の具である。

4.Adobeの最新ツールを、webデザインでいかにして使うか

第4セッションでは、生明氏と樋口氏によるAdobe CC 2017の新機能やweb向けの機能、Adobe XDを紹介し、今と未来のwebデザインのワークフローを紹介した。

まずは、樋口氏がPhotoshopに追加されたアートボードツールを紹介。

今まではIllustratorにしかなったアートボードツールが追加されたことにより、Photoshopでもサイズが違う画像をいくつも作成することが可能になった。

アートボードで作成した複数の画像をPNGとしてクイック書き出しをすると、自動的に一括で画像が書き出される。簡単な修正をした際にこのコマンドをするだけで、画像の差し替えが簡単にできる。

Illustratorではピクセルプレビュー、CSSプロパティ、ピクセルグリッドに整合の機能を紹介。

ピクセルプレビューを使うことで、Illustratorでピクセルでの表示状態を確認することができる。

CSSプロパティは、例えば、ボタンを作成するとCSSプロパティにCSSが書き出される。この機能を使えば、グラデーションも簡単にCSSで書き出すことができる。

ピクセルグリッドに整合は、ピクセルをスナップ（整合）する機能。描画時、拡大縮小時、移動時、それぞれどのタイミングでスナップするか設定ができる。Illustratorでくっきりしたラスターイメージが作成できる。

次に、生明氏がDreamweaverを使い、自身が出演したweb制作に関わる方のためのセミナーイベントCSS Niteでも披露した、デザインビュー機能による高速・楽々マークアップを紹介した。

用意していたテキスト原稿を2分程度でマークアップを完了させた。

続いて、Adobe XDの紹介。

Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。

グラフィックの作成だけでなく、作成したデザインカンプをクリックやタップで画面遷移できるプロトタイプモードがある。

Adobe XDはデザイナーだけにとどまらず、ディレクター、営業などがプレゼンツールとしても活用できる。

5.現代的webデザイン論考 クロストーク

第5セッションでは、生明氏、樋口氏、関口氏の3人によるクロストークが行われた。

webデザインサイド、グラフィックデザイン・DTPサイド、フォントサイドの観点から、それぞれが一番言いたいことを述べた。

生明氏：webサイド

印刷業界の方もこれからはweb制作もしていかなくてはいけない。

また、web業界の方は反Adobeという意識が少なからずある。

Adobe以外にもツールはあるが、今のAdobeを知って使ってもらいたい。

新機能などを紹介することでAdobeの良さを伝えたかった。

樋口氏：グラフィック・DTPサイド

色・文字などをコントロールしてデザインをする際に、IllustratorではなくXDなどでデザインをしてみてほしい。

デザインをする中で、どう動かすかを考えて制作すれば、そのままwebに移行できる。

そして、webデザイナーやコーダーと一緒にセットでサイト制作することが、チームでやっていくということではないか。

関口氏：フォントサイド

6年前のwebフォントのサービス開始時には、どうすれば早く表示できるかなど、技術的な質問がとても多かった。

しかし、webフォント導入が簡単になった1年ぐらいでは、900書体もある中からどれを使えばいいのか、コンテンツに合う書体は何がいいのかなどの質問に変わってきている。

コンテンツにおける書体が、どのような役割を果たしているのかディスカッションされることが増えている。

サイトに使用するwebフォントの選定がすごく重要だと感じている。

まとめ

それぞれの立場から現代のwebデザインに対して意見していただいたが、共通する点は、技術やツールの進歩により様々なデザインの実装に制約がなくなりつつあるということではないだろうか。

生明氏や樋口氏から紹介があったように、Adobe の最新ツールを有効活用することにより、デザインにおけるwebと紙の垣根はなくなりつつある。

さらにwebフォントの普及がその傾向に拍車をかけている。昔のwebデザイナーが画像として使用するしかなかったデザインのコンセプトや世界観を表現するためのフォント。昔のwebデザイナーはデザインの世界観を表現するためにやむなくフォントを画像として使用していた。それが今では、数多くのwebフォントにより、見出しにとどまらず、コンテンツの中身までこだわりのフォントを搭載できる時代となった。

クロストークでも紹介された、総務省も後援している「たてよこWebアワード」で最優秀賞を受賞した鈴乃屋オリジナルコレクションサイト「衣のいのち」や、株式会社そうさすのコーポレートサイトはまさに、パンフレットをWeb化したようなサイトだ。

webフォントの普及により、紙に限りなく近いweb上でのデザイン、表現が可能となった。

今でこそwebフォントの普及率は低いが、そう遠くない未来には当たり前のようにwebフォントが使われるようになっているかもしれない。

変化する環境に対応していくためにも、スキルアップとトレンドの把握、そして情報収集は欠かせないものになるだろう。