本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。
9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。
そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。
ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。
既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいという方の参考になれば幸いです。
自己紹介
私は普段、フリーランスとしてWebデザインの仕事をしています。
最近は、Q&Aなう など、Twitterと連携したソーシャル系WebサービスのデザインやUIに関わったり、iPhoneアプリの UI デザインなどをしています。
その他、WordCamp KOBE 2011 にてWebデザイナー向けに「WordPressサイトをデザインする際に気をつけていること」というテーマで講演をしたり、このブログを書いたり、Web専門誌等への執筆もしています。
Webサイトはどんなソフトで作られているのか
私は、これからWebデザインの仕事をはじめたい方には「Adobe CS 5.5 Design Premium」という Adobe のソフトをセットにしたパッケージを薦めています。
Adobe CS 5.5 Design Premium にはこのようなソフトが含まれています。
- Photoshop CS5 Extended
- Illustrator CS5
- InDesign CS5.5
- Dreamweaver CS5.5
- Fireworks CS5
- Flash Professional CS5.5
- Flash Catalyst CS5.5
- Acrobat X Pro
- Bridge CS5
- Device Central CS5.5
- Media Encoder CS5.5
その中で、特によく使うソフトとその役割を覚えましょう。
Photoshop
Photoshopは「写真屋」という意味です。
本来、写真の色調補正や切り抜きなどに使われるソフトなのですが、あまりにも高機能なのでWebデザインやイラストなどさまざまな用途に使われています。
これは、私が昔 Photoshop で作ったコラージュ写真です。
イタリアで撮影した写真やネットのフリー写真素材など、12枚の写真を合成して制作しました。
Illustrator
Illustrator は、元々イラスト…というかベクターグラフィックの作成に使われるソフトです。
Web制作では、ロゴやアイコン、ピクトグラムの制作などによく使われます。
印刷業界ではポスターやチラシなど、単ページの印刷物のことをペラ物というのですが、これの制作に使われています。
皆さんも、Webデザイナーをしていると、ついでにロゴや名刺、イベントのポスターなどを依頼されることがあるかもしれません。
そういう時は Illustrator を使うと便利だと思います。
ちなみに、私の Twitter アイコン も Illustrator で制作しました。
ビットマップ画像とベクター画像の違い
例えば、Photoshop のテキストツールを使って「あ」というテキストを配置し、それを拡大表示すると左のように見えます。それに対して Illustrator だと右のように、いくら拡大しても滑らかになります。
なので、Illustrator に図形や文字を配置して制作した場合は巨大な看板や印刷物などの場合でも滑らかに見えます。
対して、デジカメなどで撮影した写真データは、元々ビットマップ画像なので、Photoshop で扱うのに向いています。
Fireworks
Fireworks は、Webデザイン制作用のソフトです。
操作は Photoshop というより Illustrator に似ていると思います。
複数ページのデザインを1つのファイルでまとめて扱ったりと便利な機能もあります。
しかし、多くのWebデザイナーは Fireworks ではなく Photoshop で Webデザインの制作をしています。
理由としては、Photoshop があまりにも多機能すぎて何でもできてしまうことや、Fireworks に比べてPhotoshop の方がグラデーションが美しかったり、複雑な加工もできることがあげられると思います。
最近は Fireworks でも美しいグラデーションが制作できるようになってきたので、今後 Fireworks が Webデザイン制作ソフトの主流になる可能性はなきにしもあらずという感じです。
この講義では、Fireworks ではなく現在主流の Photoshop で Webデザインを制作する方法を勉強します。
Fireworks についてより深く知りたい方は、Fireworks Mania などのサイトが参考になると思います。
Fireworks に興味がある方は、ぜひご覧になってみてください。
Dreamweaver
まず Dreamweaver の読み方ですが「ドリームウェーバー」ではなく「ドリームウィーバー」ですのでご注意ください。
スペルは waver ではなく weaver です。weaver とは織物などの「織り手」のことです。
Dreamweaver は、大量の HTML をまとめて編集する場合などに便利な機能が豊富に付いています。
ただ、 Dreamweaver は高価なソフトですので、Web制作会社に必ずしもあるとは限らないことや、動作が重いこともあり、上級者はあまり使用していないようです。
私も普段コーディングする際は Dreamweaver はあまり使用していません。
そういったこともあり、この講義では Dreamweaver を使用しますが、「Dreamweaverでないとできない方法」ではなく「Dreamweaver以外のソフトでもできる方法」でのコーティングについてお話したいと思います。
Flash Professional
2〜3年ほど前まではWebページ上で何かを動かす場合は Flash が主流で、Flash 制作者はひっぱりだこだったためか Webスクールでは Flash 講座が大人気でした。
しかしその後、Apple が iPhone や iPad で Flash がサポートされないことなどにより Flash 人気が衰え始め、先日 Microsoft も Windows 8 の InternetExplorer 10 の Metro スタイルでは Flash などのプラグインをサポートしない ことを発表しました。
世界中で広く使われている InternetExplorer で Flash がサポートされないということは、ほぼ Flash への死刑宣告に等しいと私は思っています。
私の周囲の Flash 制作者の方に話を聞いても、最近は Flash 案件はめっきり少なくなったという話を聞くことが多いです。
ちなみに、Flash 制作者のことを「フラッシャー」と呼ぶ方が結構いらっしゃいますが、flasher とは英語で「露出狂」という意味ですので、あまり使わないほうが良い言葉だと思っています。
この講義の方針
「実践的」とは、例えば素早く制作できるよう、極力ショートカットキーでの操作を基本とします。
「これまでの技術」より「これからの技術」を重視します。
ソフトの使い方だけではなく「デザインの基礎」を重視します。
目標は「自分のポートフォリオを制作し、
就職活動に役立てる」ことです。
まずは「デザインの基礎」を知ること
多くの方は、Photoshop などのソフトの使い方が分かればデザインが出来るようになるという「勘違い」をされているかもしれません。
しかし、実際はソフトが使えるようになることとデザインが出来るようになることは、全く別物です。
例えば、私が2〜3年前に山手線の車内で観た、某PCスクールのCMの例をあげてみます。
その時の映像をネットで探しても見つからなかったので、再現画像でお送りします。
ある会社の新入社員で、某PCスクールで Excel を習った「できるA君」と「PCが苦手なB君」がいました。
ある日、上司が2人に対して「Excelで見積書を作るように」と言いました。
A君はすごいスピードで見積書を作り上げ、おまけに色まで付けました。
PCが苦手なB君は、見積書をの文字を入力するだけで精一杯でした…
そしてできあがった見積書がなんと！
B君が作った見積書はごく一般的な見積書ですね。
それに対してA君が作った見積書は…本当に大切な取引先に提出しても大丈夫なものでしょうか。
次に、もっと身近な例について考えてみましょう。
これは、新宿駅の近くに実在するビルの案内板です。
おそらく Illustrator 等で制作したのだと思います。
男性や女性のピクトグラムも綺麗に描けていますし、フォントや矢印も実に綺麗ですね。
さて問題です。化粧室はどっちの方向でしょうか？
（ちなみに、この写真は数週間前に Twitter で話題になっていた画像です。元画像はこちら）
何度も言いますが、「ソフトの使い方を知っていること」と 「デザインができる」ことは別の技術です。
見積書の例は、見積書としての「様式」が守られておらず、新宿の案内板の例は「ユーザビリティ」への配慮が足りないと言えます。
これから、それらについて学んでいきましょう。
問題
この案内板を見やすく書きなおしてください。（手書きで紙に書いてみましょう。）
フロア全体の地図は以下の通りです。
（この図は Liner Note に掲載されていたものです）
解答例は以下のページに掲載されています。
ぜひ、ご自分の案を紙に書いた後でご覧になってみてください。
例えば、Apple の 元CEO、Steve Jobs 氏はデザインについて「デザインとは、単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。」と述べています。
単に綺麗に見える、かっこ良く見えるのが良いデザインというわけではなく、ユーザーがどう使うか、どうすればもっと見やすく、使いやすくなるかということまで考えるのが大切ですね。
補足
実際の講義では、このあと Photoshop の基本操作（この日は写真補正）を行なっています。
Photoshop は、お持ちでない方も以下のページから体験版（30日間機能制限なしで利用可）がダウンロードできます。
Photoshop CS5 Extended無償体験版ダウンロード
Photoshop は入門書も数多く発売されていますので、ぜひご自分で勉強されてみてください。
入門書の中で、人気のあるものをいくつか紹介いたします。
※こういった入門書や入門サイトでは、メニューやツールバーのアイコンをクリックして操作する方法が書かれていることが多いですが、極力メニューやアイコンをクリックするのではなく、Crrl+N などのショートカットキーで操作する方法に慣れてください。
ショートカットキーは、メニュー内やツールにマウスカーソルを重ねた際に表示されます。
基本操作に慣れたら、チュートリアルを見ながらかっこいいイメージを作ってみてください。
「Photoshop チュートリアル」などのキーワードで Google検索すると、色々なチュートリアルが見つかると思います。
以下のページであれば、日本語のチュートリアルが見れますのでお勧めです。
ぜひご自分で作ってみてください。
