PhotoshopからはじめるCSS再入門 – 第1回 これからのWebデザイン

Webデザインの現場において、もっともよく使われているツールは「Photoshop」です。しかし、Photoshopはその名の通り、もともと写真の補正や加工を行うツールでしたが、はじめから鉛筆や線のツールがありました。好きなところに好きなものを描くことができる、制約のない自由なデザインツールです。

Photoshopでは、描きたいところに自由に描くことができる

そんなPhotoshopをWebデザインに使うようになって、デザイナーが直面した問題の１つが、Photoshopでデザインしたものがそのままページで再現されないことがあるというものでした。

現代のWebサイトは、HTMLに書かれた文字や画像を、CSSに書かれた指示でレイアウト、装飾される仕組みです。したがってWebデザインはCSSの制約を受けます。これまで、CSSで再現できないデザインはどうしていたかというと、CSSを作る際になんとか近い表現を探って実現していたか、強引に丸ごと画像にしていました。

デザイナーがHTMLとCSSを勉強した上で、CSSの制約に沿ってWebデザインを行うのは理想ですが、勉強することも多く、アルファベットと数字だらけのファイルをいじることに抵抗がある人も多いのではないかと思います。

アルファベットと数字だらけで、とっつきにくい

この連載のねらい

アドビはWebデザイナーに向けて、新しいデザインツール「Adobe Edge Reflow」を開発しました。Edge Reflowには、線やシェイプを描く機能はありません。代わりに、レイアウトや装飾の調整を行う機能が用意されています。マウスや数値入力で調整するだけで、CSSの制約に沿ったデザインができるというのが、Edge Reflowの特徴です。

PhotoshopやIllustratorでデザインのパーツを作り、Edge Reflowでレイアウトを調整してカンプを仕上げるという、新しいWebデザインのやり方が生まれようとしています。

この連載は、「Edge Reflowを使ってデザインを試しているうちに、いつの間にかCSSのことがわかっていた！」という素敵な連載を目指したいと思っています。

PhotoshopやIllustratorと組み合わせて使う

レスポンシブWebデザイン

人々はパソコン、スマートフォン、タブレット、テレビなど、色々な大きさの画面で、Webサイトを見るようになりました。なかにはタブレットともスマートフォンともいえないような大きさのデバイスも登場してきています。縦向きにして見る人もいれば、横向きで見る人もいます。

こういう状況の中、一体どのデバイスに合わせてWebサイトはデザインしたらよいか、という問題が生まれました。そこで考え出された仕組みが「レスポンシブWebデザイン」です。レスポンシブ（Responsive）という英語には「すぐ応答（反応）する」という意味があります。どんな大きさの画面で見ても、その大きさに合わせてレイアウトや文字の大きさを変えるという画期的な仕組みです。

レスポンシブWebデザインでは、HTMLをたくさん作るのではなく、CSSを画面の大きさに合わせてたくさん用意しようというのが基本的な考え方です。

レスポンシブWebデザインに向いているサイト

HTMLをたくさん作らないわけですから、文章や画像などのコンテンツそのものは、画面の幅が変わっても変わらないということが大前提になります。パソコンとスマートフォンでは、そもそも伝える内容が違うとか、コンテンツの順序が違う場合は、レスポンシブデザインには向きません。

画面の幅に応じて、文字や画像の大きさ、隙間を変えたり、装飾を変えたり、表示したり消したりすることで対応できる場合は、レスポンシブWebデザインで対応できます。

Adobe Edge Reflowを使ってみよう

それでは、早速Edge Reflowをインストールして、どんなツールなのか見てみましょう。

アプリケーション「Adobe Creative Cloud」を起動します。（体験版がページ右上のリンクからダウンロードできます） Appsタブから、「Edge Reflow CC (Preview)」をインストールします。Edge Reflowは開発中のアプリケーションです。まだ完成していません。そのため英語版を使うことになりますが、分かりやすいアイコンが随所にあるので、それほど心配することはありません。

Creative Cloudで、Edge Reflowをインストールする

はじめてEdge Reflowを起動すると、ウェルカムプロジェクトというサンプルページが表示されます。表示されない場合は「Help」メニューから「Open Welcome Project」を選んでください。

画面上のカラフルなバーは、画面の幅を表しています。このサンプルページの場合、3つの幅を想定してデザインされていることが分かります。それぞれの色をクリックして、幅を切り替えてみてください。

紫、青、水色の部分をクリック

画面の右側にはハンドルもあって、これを掴んで色々な幅でどう見えるか確認することもできます。

ハンドルをドラッグして幅を変える

次回からは、Edge Reflowを使ったデザインの方法を解説していきます。お楽しみに。