WEBデザインど素人が、あえてIllustratorなんて高額ソフトに手を出してみた
コーディングしながらWEBデザインを構築していくほどの知識も無いので、【Adobe Illustrator】でデザインを描いてから、コーディングした
この記事は脱サラして、ゼロから独学して、この程度のものなら作れるようになりました、という記事のシリーズです
このブログのカテゴリ「脱サラ前の準備」で長々と記事を書いていますが、「ゴチャゴチャ言ってないで早く何をやるのか書け」という声が聞こえてきそうなのでそろそろ書きます。
それはデジタル写真をフィルム化するサービス【Filming(フィルミング)】です。
過去記事一覧はタグ：Filmingメイキング記事からどうぞ
前回、「メーカー勤務30代サラリーマンが、脱サラして商売するために、WEBデザインについて考えた」という記事を書きました。
PHPもロクに理解していない私が、コーディングしながらデザインも構築していくのは効率が悪すぎるだろうということで、WEBデザインを何かスケッチする方法は無いかと考えていました。
最初は手書きでやってたんですけど、絵心があるわけでもないので、すぐに限界はきます。
そこで思いついたのが、昔から無駄にあこがれだけあった、【Adobe Illustrator】を使うこと。
Adobeのソフトは高いというイメージとともに、プロのデザイナー・クリエイターが使うものという、ある意味で高嶺の花的な存在でした。（私はデザイナー志望とかでは全くなく、本当に漠然としたイメージだけの印象です）
ネットで調べてみると、どうやらWEBデザインをするにはPhotoShopの方が一般的らしいんですけど、最近はillustratorの機能拡充により、Illustratorでやるのもアリって感じらしいです。
でもやっぱりAdobe製品はお高い。
とりあえず体験版使ってみるか。
そしたら、なんのスキルも無いくせに、急にハイソな人間になった錯覚に陥ってしまいました。
「う〜ん、Adobe製品がプロをトリコにするのはこのあたりのセンスの良さなのかな？」（ちがう）
一気に気持ちが傾きかけましたが、わずかに残っていた理性が語りかけてきます。
「もっとリーズナブルなソフトがあるから、お前はそれで十分なんじゃないか？」
確かに一理ある。
そこで、ネットで探してみると【Inkscape】というIllustratorと同じような機能を持ったソフトが、なんと無料で使えるとのことじゃありませんか。
さっそくインストールして使ってみましたが、「なんか違う」
これが使い勝手の差によるものなのか、完全に私の心の目が曇ってしまっているのかは、もはやわかりません。
使ってて気持ち良くない、ということに尽きます。
ど素人のクセになにを生意気な、と思われるでしょうけど、私は道具の使い心地に無駄にこだわる性格なのでしょうがありません。
最近は「Adobe Creative Cloud」というシステムで、ソフト一本まるまるお買い上げで、とんでもない額を一括払いするのではなく、月単位の契約で金額を払うことができるようになっています。
ですから、「まずは一年分だけ・・・」と金銭面について自分を無理やり納得させて、Illustratorを使い始めることになりました。
PhotoShopではなくIllustratorを選んだ理由
これは私が「絵を描く」というより「図形を書く」方に慣れているからだと思います。
- Microsoft OfficeのPowerPointでやたら資料を書かされるので、それで図形の描画に慣れた
- CADで製図をしているので、キッチリカッチリ線を引きたくなる
特にoffice系ソフトの図形描画に慣れている人は、Illustratorは取り組みやすいんじゃないでしょうか。
すごく乱暴に言うと、Illustratorはofficeの図形描画の超高機能版みたいなもんだと思います。
この、図形を書いていくという感覚が自分には合いそうだったのでIllustratorを選んだという、「そんなんでいいんかい？！」という理由です。
こんな感じでデザインしていきました
Illustratorの使い方を勉強しながら、少しずつWEBデザインを進めていきました。（デザインというほどたいそうなものじゃないかもしれませんが）
Illustratorの使い方についてはネット上でも、書籍でもたくさんあるのでここでは割愛します。
ただ、WEBデザインという観点で一つだけ注意した方が良いと感じたことがあったので、参考にしたページをご紹介しておきます。
IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます（ツッコミ歓迎ですので、何かあればお気軽に）。
これは、図形の位置をピクセルの整数単位でぴったり揃うように配置しないと、線が滲んだようになってしまう、というのを回避するための設定です。
さて、あまり参考にならないかもしれませんが、ど素人なりにこんなことやったというのを少しだけご紹介します。
バナーの大きさや配置をどうしたら見栄えが良さそうか。
簡単に要素を動かしたり、コピーしたり出来るのが良いところ。
どちらのフォントが良いか？をちょこちょこ変えながら確認
ロゴのデザインもいろんな効果を試しながら
このブログのプロフィールに使っている似顔絵もIllustratorで自作。
写真で撮った自分のビミョーな顔をトレースして、それをディフォルメ（詐欺）
てな感じで、払ったお金の元を取れてるかは微妙ですが、楽しみながら作業できてます。