グラフィックデザインという点で一括りにされがちな、エディトリアルデザインと、Webデザインですが、二つを実際に経験してみると携わるメディアだけではない様々な違いがあることに気づきます。
この記事では、エディトリアルデザイナーからUIデザイナーに転向した筆者が、セブンデックスで初めて本格的なWeb制作を経験した際に引っかかったエディトリアルとの違いや、その時に参考になったセブンデックスPOSTのエントリーを紹介していきます。
紹介するのはどれも基本的なことなので、Webデザイナーになりたい方、これから領域を広げたい紙媒体デザイナーや、Web業界で働き始めた方などの参考になれば幸いです。
参考のために筆者の入社前のWebデザインの知識について紹介しておくと、前職は雑誌デザインがメイン、WebはLPを何本かと簡単なサイトをphotoshopで作ったことがある、という程度です。
はじめに
Webデザインをやる前の筆者は、紙とWebの違いをざっくりとメディアの違いくらいにしか思っていませんでした。
実際には、紙は紙というメディアとして成立していますが、 Webを見るためには機器やネットワークを要し、ページにアクセスする必要があります。その媒介があることで、ページ内のデータ量を適性にする必要や、機器やブラウザに依存しないデザインをする必要が生まれ、様々な制約が生まれてきてしまいます。
ほとんどのエディトリアルとの違いは、そこに由来するものですが、その違いこそがデザインとユーザーの相互的な関与を生み、WebデザインやUIデザインの面白さにもつながっているのだと思います。
フォントについて
デザインをしていく上で重要な要素の一つであるフォントですが、エディトリアルの場合はアウトラインや、画像化などを駆使し、割とどんなフォントでも使用することができます。
しかし、Webページの場合は表示できるフォントがユーザーの使用機器に入ってるフォントに依存するため、機器によって表示が変わる可能性があります。（この辺はエディトリアルでアウトラインしてない場合と一緒で、代替フォントが表示されます。ちなみにWebの場合は代替フォントの指定が可能です。）
作ったままのデザインで表示するために、むやみに画像化したりするとページ内のデータ量が増えてしまい、読み込みが遅くなってしまうため、離脱の原因や、サイト自体の印象を損ねる可能性があります。また、SEOの観点からも、文字として認識されなくなってしまうため、文字を画像化することは推奨されていません。
そういったことを回避するためにも基本的にはWebフォントを使用することが選択肢となります。
Webフォント
Webフォントとは、Webサーバー上に置かれたフォントデータやインターネット上で配布されているフォントデータ自体を読み込んで、文字を表示できるようにするフォントです。サーバーからフォント情報を読み込むため、使用機器に関係なく表示することが可能です。
GoogleやAdobeが提供している無料のものも多いですが、買い切りのもの、有料のサブスクリプションのものもあります。特にAdobe fontで同期したフォントをエディトリアルの感覚で使おうとすると、フォントによっては有料のサブスク契約が制作者ではなく、Webページの所有者側に必要になってしまうので注意が必要です。
エディトリアルにとっての王道フォントがない場合も多いので、筆者はこれを機にWebフォントを探求してみようと思っています。
他にもカーニングや行間、最低級数の扱いもエディトリアルとは変わりますので以下のPOSTを参考にしてみてください。
開発について
制作したデザインをオンラインで見れるようにするにはデザインをコードに落とす作業が必要になります。一人でデザインからコーディングまで行う方であれば特に問題ないかもしれませんが、エンジニアさんにコーディングをしてもらう場合には、渡すデザインデータが他人から見てもわかるようになっている必要があります。
また、自由気ままなデザインが可能なエディトリアルとは違い、Webデザインではコーディングを考慮したデザインや、ユーザーの機器に表示を依存しないためのレスポンシブデザインの制作や、表示幅を切り替えるブレイクポイントの設定が必要だったり、様々な制約があります。
開発観点で考慮すべき点は今までも多数のPOSTで紹介されているので、以下に紹介するものを見ておくことをおすすめします。
8の倍数でデザインする
POSTで今まで取り扱われていない、Webデザインで取り入れることをおすすめしたいやり方として、8の倍数でデザインする、というものがあります。
フォント以外の余白や要素などを8の倍数を用いてデザインすると、デザインもコーディングを効率的に行うことができます。また、多くのモニターの解像度は8の倍数なため整合性もとりやすくなります。
Webデザインでは位置や、要素の大きさに端数が出ると画像の表示がぼやけてしまったり、コーディングの際に端数をどう処理するのかを検討しなくてはいけなくなってしまいます。それを回避する点でも初めから8の倍数でデザインする方法はおすすめです。
リリース前のチェックについて
エンジニアさんに渡してひと安心してしまいますが、一通りコーディングが終わってから、リリースまでの間にもチェックすべきことが実はたくさんあります。
エディトリアルにおいての色校チェックのようなものですが、見た目だけではない、リンクの遷移や動きなど機能面の確認もあります。ここでも過去のPOSTで最低限すべき確認について書かれたものがありますので紹介させていただきます。
その他の役に立ったPOST
上記の点以外で役にたったWeb知識関連のPOSTをこちらに紹介します。
おまけ：言葉のちがい
ここまでは技術的な違いについて紹介してきましたが、使用する言葉や用語にも違いがあると感じました。
エディトリアルデザインでは出版社や、編集者と仕事をすることが多いため、出版、校正用語を当たり前のように使用していましたが、WEB業界ではあまり使われないようです。
例をあげると、台割、赤字、レイレ（デイレ）、イキ、ママ、級アゲなどなど。エディトリアル頻出用語も転職してからあまり使わなくなりました。
今回は私が初めてWEBデザインをした際の気づきなので、基本的なことをメインに紹介いたしました。この他にも様々な興味深い違いがあると思うので、経験を積み、記事をアップデートしていきたいと思っています。
エディトリアルデザイナーと、WEBデザイナーはメディアや、ユーザーの有無などの違いはありますが、意匠を作る力は引き続きどちらでも求められていくと思います。表現方法が変わってもその力は活かすことができると思うので、分野を超えて活躍したいと望むデザイナーに、少しでもこの記事が参考になると嬉しいです。
また、ここでご紹介したセブンデックスの記事以外にも、スクール形式で学びたい方向けに以下のWebスクールをご紹介いたします。
WebスクールCampusは、WEBデザイン、プログラミング、動画編集、マーケティング、SNS運用など幅広いWEBスキルが卒業なく学び放題のスクールです。
技術的なスキルだけではなく、仕事の流れや案件の獲得方法、請求書の作成や確定申告などフリーランスの実務面のサポートも行っています。
会社紹介資料
セブンデックスの会社概要が解説されている資料を無料でダウンロードできます。
