Diary Archive

以前「効率的にデザイン力を身につける方法」という記事で、デザイン力とは単純なグラフィックスキルのことだけを指すのではなく、そのデザインである必然性を見て取れる"目利き"の能力であると述べました。そして、デザイン力を効率的に高める手段として『模写』をお勧めしました。

色使いからグラデーション、ホワイトスペースに至るまで、全てを忠実に再現し、『なぜそのデザインなのか？』をあらゆる観点から自分なりに分析することによって、デザインに必要な『考える力』を養うことができます。今回はその模写をするにあたり、活用すればさらに効果が見込めるリソースをご紹介します。

20 High Quality Photoshop Web Design Tutorials

追記：もっとクオリティが高いチュートリアルサイトがありましたので、こちらもご確認ください。
60 Web Design Photoshop Layout Tutorials From 2010

模写を行うには当然元となるデザインが必要になりますが、前回の記事では玉石混交の中から玉を選び出す手っ取り早い方法として『アックゼロヨンアワード』の受賞作をチェックするということをお勧めしました。デザイン力を身に付けるにはそれだけでも十分なのですが、模写を行う以上Photoshopというツールの使い方はマスターする必要があります。いくら模写によって効率的にデザイン力が身に付くとはいえ、ツールの使い方がよく分からない、面倒くさいということになってしまうと先に進めなくなってしまうからです。

『20 High Quality Photoshop Web Design Tutorials』ではタイトル通り、クオリティの高いWebデザインのチュートリアルが20例紹介されています。ひとつひとつが詳細に解説されていて、初心者の方でも手順通りにやれば再現できるように作られています。英語に抵抗がある方でも多少Photoshopの理解がある人であればキャプチャを見るだけで操作方法は把握できるでしょう。

これで初心者の方に優しいということがお分かりかと思いますが、実は私を含め実務レベルでPhotoshopを使用している人であっても、痒いところに手が届くレイヤースタイルの使い方や、美しくレイアウトするためのガイド機能の使い方など、「今まで非効率なやり方をしていた」「この機能はこういう使い方も出来るのか」といった新しい発見があることは間違ありません。

ただし、今回のリソースはあくまで模写をするという前提で、有効に活用すればツールの使い方における効率化もできるよという話で、最初から答えを見ながらやるのはもはや『模写』ではなくなってしまいます。自分なりに試行錯誤し、制作者の意図を汲み取る、デザインの息遣いを感じ取ることを意識しなければデザイン力を身に付けることは出来ません。まずは自分で消化してから、「答え合わせ」をするようにしましょう。

ブログでは大言壮語な私ですが、実は現在無職です。昨年3年ほど勤めた制作会社を退職し、フリーの仕事を請ける傍らで転職活動の準備を進めてきました。いくら準備万端にしても、100年に1度の不況と形容されるほどですから、そう簡単に事が運ぶとは思えません。そこで自分自身の振り返りも含めて、この不況を乗り越えるにはどのような能力が必要になるのかを考えてみようと思います。

得意を見つける

実力主義なWeb業界で生き残るためには、何かしらの武器を持っていなければ厳しいですが、逆に仕事さえできれば学歴や資格の有無などは大して影響しないということもいえます。教育環境が整っていて、新卒採用を行う企業もありますが、いわゆる制作会社と呼ばれる企業の多くが即戦力を求めています。最近では、一定期間募集枠を設けるというよりは一年中募集をかけて本当に優秀な人材が見つかった場合に採用を検討するという方式が主流になってきているように思います。

理由は単純に、無駄な人件費を増やしたくないというのと、2004年に労働基準法の解雇条項が改正されたことで、そう簡単に解雇が行えないというリスクもあります。広い裁量権が認められている試用期間であっても、本採用の拒否には正当性が求められるので、企業側も慎重になるはずです。もしあなたがWeb業界への就職、或いは転職を考えているのなら、何か一つでも得意なことを見つけてください。デザイナーであれば、グラフィックデザインが得意、イラストが得意、映像制作が得意、フロントエンド技術が得意など、それだけは誰にも負けないというものを身に付ければ、必ず人事の目に止まるはずです。後はその得意がどのように企業の利益になるのかを上手く伝えることができれば良いと思います。

ノリシロを持つ

以前「Webサイトをつくるコンセプト ～FLASH vs HTMLについて～」でも述べた内容ですが、自分の分野だけに固執せず、広い視野を持って、相互補完しながら取り組もうということです。なぜならWeb制作者は職域が広く、他の職種と深く関わっているからです。それに、プロジェクトという単位でモノが作られる以上、通常一人で完結するということはまずありません。

仕事を受注してから実装されるまでに、あらゆる分野の専門家が関わりますが、『誰のためにどのようなことをどのように伝えるのか』という提供価値、即ちコンセプトとなる部分が明確でなければ、伝わるコンテンツなど出来るはずもありません。『伝えるべきこと』『伝えたいこと』を『伝わる』ようにするには、プロジェクトに携わるスタッフが同じ目的意識を持って取り組まなければ成り立たないのではないでしょうか。

Webサイト構築におけるプロジェクトであれば、要件定義、分析フェーズ、戦略フェーズ、設計フェーズ、実装フェーズ、運用フェーズという具合に、全てのプロセスが時系列に進んでいきます。もしコンセプトがメンバー間で共有されていなければ、次フェーズに進む段階で必ず齟齬が生じてしまいます。では具体的に図を用いて考察しましょう。

以下の図はユーザーエクスペリエンスを構成する要素です。Webサイトは『テクノロジー』『ビジュアルコミュニケーション』『情報アーキテクチャ』という3つの要素によって作られます。

それぞれの要素が独立するとプロセスが『点』になり、次フェーズに進む段階で齟齬が生じ、無理な軌道修正を強いられてしまいます。実装フェーズになって仕様変更や、帳尻合わせが発生し、苦労した覚えのある方は多いのではないでしょうか。例えそのような状況下で形にしても、それはハリボテのような、中身がない『伝わらない』コンテンツになってしまいます。

理想的なのは、プロジェクトに関わるメンバーが相互補完を行うことで、Webサイトの提供価値であるコンセプトが共有され、プロセスが『線』になることです。ユーザーエクスペリエンスを構成する3つの要素が互いに依存し、相関があるように、私たちWeb制作者も互いに補完し合うべきです。先日の「CSS Nite LP, Disk 9」で羽田野氏が『HTML5が出て来たらFLASHがなくなるという議論はナンセンス。得意分野で相互補完』とおっしゃっていましたが、まったくその通りで、お互いを理解する前に技術ありきの考え方をしてしまうのはスマートとはいえません。

コンセプトが重要であるというのを再三述べているのは、そこが明確でなければ『何が必要で何が不要なのか』が分からないからです。また、仮にコンセプトが明確であっても、メンバー同士がお互いの役割を理解していなければ、それこそ好き、嫌いという不毛な議論が発生してしまうでしょう。『最適な選択』を行っていくためには、明確なコンセプトを共有した上で、お互いの役割を理解し、相互補完を行っていく必要があるのです。

一人で全てのことを理解するなんて不可能だと思われた方もいるかもしれませんが、それは当たり前のことで、だからこその『補完』です。プロジェクトで関わるスタッフとコミュニケーションを円滑に取り、かつお互い価値観や考え方、技術に関することまでを積極的に共有することで、お互いが苦手とする部分を補え、かつ認識のずれを早期に解消することができます。

とはいえ、現在ほとんどの企業で『作業効率化のための分業』が取り入れられています。分業すること自体は良いのですが、そのあり方というのは企業によってまちまちで、序盤からプロジェクトメンバー全員でブレストなどを行うところもあれば、設計はディレクター、実装はデザイナーという具合に完全分業しているところもあります。個人的に、後者のやり方はナンセンスだと思っています。なぜなら、最初に述べた通り、Web制作者は職域が広く、他の職種と深く関わっているためです。

運用など、大量生産が必要になる業務においては効率的だと思いますが、1から作る性質の案件に効率を求めすぎても良い結果は生まれないでしょう。転職活動をするにあたり、色々な企業のホームページを拝見しますが、やはり一番重要視しているのはポートフォリオ(ホームページ含)です。Webサイトというモノがユーザエクスペリエンスを提供するメディアである以上、どのようなインタラクションがなされていて、そこにエモーショナルなものがあるか、何をどのように伝えようとしているのか、そしてそれが『伝わるものであるか』という観点から、どのような環境でどのような人達が作っているのかを推測することができます。

食べ物であれば噛み締めて確かにおいしいと判断するように、自己満足であっても、それは自分の動機として十分なものになるのではないでしょうか。少し話が反れてしまいましたが、一つの概念や手法に捕らわれることなく、最適なユーザーエクスペリエンスを導き出すためにはノリシロを持つということが重要になります。そして、それは作品に大きく影響するということだけ覚えておきましょう。

継続する

継続力があるというのは、それだけで十分な武器になり得ます。特にWebという分野はまだ歴史が浅く、新しい考え方や技術が次から次へと出てくる流動的な業界なので『普段から何かを学ぼうとしているか』という部分は重視されることが多いようです。プロダクト業界などでは面接の前に課題をこなすのが当たり前のようですが、Web業界では型にはめられるような判断基準が確立していないため、実績に加えてブログなどのプラスαをアピールできると良いでしょう。

ただ、アピール材料として有効というのは二次的なメリットであって、Web業界で生き残るためには継続力そのものが必須だと考えています。デザイン一つとっても毎年トレンドが変わりますし、フロントエンドにおいては過渡期ともいえる重要な時期に差し掛かっています。そうした時代の変化に合わせて最適なユーザーエクスペリエンスを提供していくには、常に時代のトレンドを把握しておく必要があるので、自分なりにアウトプットする機会を設けるのはとても有意義なことだと思います。

また、Web業界は実力主義であるため、常に同業者＝ライバルという構図があります。認められれば仕事を任されますし、そうでなければずっと泥臭い作業を任されたりもします。そういうところで差をつけるのはやはり継続力に伴う、忍耐力だと思います。物事を継続するにはかなりの忍耐が必要になるので、継続力がある人は大体忍耐力も備えています。例え認められずに泥臭い作業ばかり任されても、そこで腐ってはいけません。何故ならそれを任されたのにはそれ相応の理由があるはずですから、まずはそれを受け入れて、誰よりもその仕事を完璧にこなすことです。三流と言われようとも、全ては『誰にも負けない三流』になってからです。そうすれば誰もあなたを放ってはおかないでしょう。

仕事を楽しむ

得意を見つけるにしても、ノリシロを持つにしても、継続するにしても、やはり楽しんでいるかどうか、それを見出そうとしているかというのはモチベーションを保つ上でも重要なことです。Webサイトの提供価値であるコンセプトを決めるのと同じで、自分が誰のために、何のために仕事をしているのかが明確であれば、『どうするべきか？』という行動力の根源になるものが見えてきます。将来好きな仕事をするために頑張るのでもいいですし、好きな仕事を探すことに頑張るのでも良いですが、とにかく自分が楽しいと思える仕事、環境を見つけることは素晴らしいことだと思うのです。

何だか精神論的な話になってしまいましたが、やはり仕事は人生の大きな割合を占めるわけですから、楽しいに越したことはありません。これはあくまで個人的な感想ですが、いわゆる公務員の方々と比べると我々はプライベートよりも仕事に対して価値を求めてる職種だと思うのです。もっと言うと、仕事を充実させることでプライベートも楽しくなると、そう無意識的に信じている方が多い気がします。少なくとも私はそう信じています。理想はあるけど、現実そう甘くないよというのは誰もが言いますが、何か重要な決断をする時には、自分のことを信じ続けるほかないのです。本当にこの仕事が好きなのか？自分がしたいことは何だろう？と自問自答して、正直な気持ちを受け止めてください。後で後悔することが一番悲しいことです。

最後に、「奇妙な国日本で、これから社会人になる人達へ」という記事で、スティーブ・ジョブスが祝賀式で卒業生に向けて行ったスピーチの内容が掲載されており、非常に素晴らしい内容だったので引用して締めたいと思います。

3つ目は、死に関するお話です。

私は17の時、こんな言葉をどこかで読みました。確かこうでした。
「来る日も来る日もこれが人生最後の日と思って生きるとしよう。そうすればいずれ必ず、間違いなくその通りになる日がくるだろう」。

それは私に強烈な印象を与える言葉でした。そしてそれから現在に至るまで33年間、私は毎朝鏡を見て自分にこう問い掛けています、「もし今日が自分の人生最後の日だとしたら、今日の予定は、本当に私のやりたいことだろうか？」。それに対する答えが"NO"の日が幾日も続くと、そろそろ何かを変える必要があるなと、そう悟ります。

自分が死と隣り合わせにあることを忘れずに思うこと。これは私がこれまで人生を左右する重大な選択を迫られた時には常に、決断を下す最も大きな手掛かりとなってくれました。何故なら、ありとあらゆる物事はほとんど全て...外部からの期待の全て、己のプライドの全て、屈辱や挫折に対する恐怖の全て...こういったものは我々が死んだ瞬間に全て、きれいサッパリ消え去っていく以外ないものだからです。そして後に残されるのは本当に大事なことだけ。自分もいつかは死ぬ。そのことを思い起こせば自分が何か失ってしまうんじゃないかという思考の落とし穴は回避できるし、これは私の知る限り最善の防御策です。

君たちはもう素っ裸なんです。自分の心の赴くまま生きてならない理由など、何一つない。

先日行われたCSS Nite LP, Disk 9「Coder's Higher」で開催された第2回コーディングコンテストで『入賞』という評価をいただきました。優秀賞は逃してしまいましたが、全体的にレベルの高い内容だったということなので個人的には大健闘かなと思っています。

第2回コーディングコンテストの結果発表

「HTML5×CSS3の実装で抑えておくべきこと」は当コンテストでの経験に基づいて書いた記事です。結果が出たので公開しようかと思いましたが、6月5日に再演版のCSS Nite LP, Disk 9.2（reprise）が開催され、コーディングコンテスト受賞作の解説もあるということなので詳細はあえて伏せておくことにします。作品は本サイトの方でも間もなく公開されるはずなので、興味のある方はご確認いただければと思います。

反省点としては不要なアニメーションを適用してしまったこと、一部JSをHTMLにべた書きしてしまったこと、もっと丁寧に作るべきだったなど挙げたらキリがありません。受賞された方の解説や審査員の方々のコメントを拝読し、改善点を見つけては「こうすれば良かったのか‥」と少し悔しい気分になる反面、次回は必ず最優秀を狙ってやろうという野望も芽生えています。また、中には私(Shoon_Miyamoto)の作品を高く評価して下さっている方々もおり、とても光栄に思います。

サイバーガーデン

第2回 コーディングコンテスト、個人的な総評

エスカフラーチェブログ

CSS Nite LP9 & 第2回コーディングコンテストレポート

頑張れば報われるということを身を持って体験できたとても素晴らしい機会になりました。
関係者の方々、参加者の方々、本当にお疲れ様でした！！

ここでいうデザイン力というのは、グラフィックスキルはもちろんですが、そのデザインである必然性を知ることの方が重要です。では、どうすれば良いのか。答えは基本的なことです、模写をするのです。賢者は歴史に学び、愚者は経験に学ぶ ― 自分の経験や理屈で物事を判断するのではなく、先人達の事跡から学ぶということ。それはWEBでなくとも、DTPでも料理人でも土方でも同じく重要なことだと思います。ただ、WEBデザインは歴史が浅いので、リソースの選び方には注意が必要です。

では、以下のサイトを見てみましょう。

西村あさひ法律事務所は個人的に好きなサイトの一つです。私が以前このサイトを選んだ理由は、業界内でも評価が高い株式会社ビジネスアーキテクツが制作したWebサイトだからです。例えばそういった具合に、石の中から玉を見つける工夫は必要です。当ブログでもサイト分析などで度々取り上げていますが、業界内の錚々たる面々が一同に会し、総合的な評価軸からWebサイトを選定するアックゼロヨンアワードの結果発表をチェックしておけば、まず間違いないでしょう。

では「そのデザインである必然性を知る」とはどういうことなのでしょうか。Webデザインを勉強し始めた当時、恩師にとあるWebサイトを模写してみろと言われ、正直見るだけで十分だと思っていた私は、細かい部分は無視しておおまかなものを作成しました。その成果物を見た恩師に「これじゃあ模写の意味がない。まったく同じものを作れ」と一蹴され、ブーたれながらも真剣に取り組み、グラデーションの表現、色使い、ホワイトスペースから文字間隔に至るまで、忠実に再現しました。

そうすると、制作者の意図を感じ取ったかのように、今まで見えていなかったものが見えてきたのです。なぜここに1pxの線を入れたのか、なぜ15pxのホワイトスペースを確保したのか、なぜこの背景色だけが違うのか、それらの気づきは模写している合間に発見され、脳はその理由を探ろうと思考を始めます。1pxの線を消したらどうなるのか、ホワイトスペースを10pxにしたらどうなるのか、背景色を統一したらどうなるのか、レイヤーを消したり、移動させたりしながら、疑問を解決しようとします。取り組むことで新たな気づきを得て、「なぜそのデザインなのか」を自分なりに試行錯誤し、消化する。それが恩師が言いたかった模写をする意味であり、本質だと思います。

「そのデザインである必然性を知る」とはそういうことなのですが、伝わりましたでしょうか。タイトルを「効率的にデザイン力を身につける方法」としたのは、グラフィックもデザインもほぼ初心者だった自分が、たったの半年間で制作会社に入社できる程度の能力は身につけることができた、という実体験に基づいています。週に1枚の模写を半年間続ければ十分プロにも通用する能力を身につけられると思いますので、騙されたと思って実践してみてください。かなり感覚的なものを文章化したので、不適切な表現があったかもしれませんが、これからデザインを始めようとしている方々の参考なれば幸いです。

その仕事が好きで、自分の才能が遺憾なく発揮できる環境で働けたらどれだけ幸せだろう。転職を控え、最近はそんな事を考えている。好みのタイプの女性が、生涯のパートナーとして相応しいかどうかは別問題という道理と同じで、やりたい事が必ずしも相性が良いとは限らない。では、どうすれば適職を見つける事が出来るのだろうか。「初めは筏下り型で行きなさい。それからしばらくしたら山登り型に切り替えなさい。」という大久保幸夫さんの言葉通り、やりたいことがいくつかある場合は、ひとまず山登りの計画は棚上げにしておいて、近くになる筏に乗って激流を下ってみる。激流を乗り越えていくプロセスの中で、自分に適しているか否かを判断する。20代のうちに大まかなキャリアプランを決め、ひとまず行動してみる。経験を積む過程で、考えが変わったり、合わなかったりするかもしれない。そうした場合は軌道修正をしながら、キャリアプランに加筆・修正を加えていく。要は30歳を目安に上る山を特定しましょうという話で、20代のうちに頑にやりたいことを決める必要もないという事だ。

今日は軽井沢から長野駅周辺に移動した。率直な感想としては、「何もないなあーここ」というのが本音である。唯一「善光寺」という割と有名らしいお寺に足を運んだが、炎天下のためさっさとホテルにチェックインしてしまった。事前に良さげなホテルをチョイスしたつもりでいたが、いざ行ってみるととても客を迎え入れようという姿勢が感じられなかった。スタッフの対応、内装、清潔感、どれをとっても普通以下だ。しかし、決めてしまったものは仕方がない、部屋で少し休んでから夕食を取りに「牛角」へ向かった。店員さんが座って待っている私の目線まで高さを合わせて、少々お待ち下さいと伝えて来た。食事中も、空いたお皿を率先して片付けてくれたり、お冷やを持ってきたり、食後は新しいおしぼりまで持って来てくれた。何と素晴らしいおもてなしだろうか。スタッフの一人一人がおもてなしを心がけているかは不明だが、お客の期待以上の事をさせる牛角という企業のシステムは素晴らしいと感じた。店を出る時にまたよろしくお願いします、と可愛いおねーさんが入り口の外まで出て来た。長野の牛角には二度と来る事はないと思うが、あなたには会いに行きます、という言葉を必死で飲み込んだ。

軽井沢にある「星野温泉 トンボの湯」というところに行ってきた。温泉だけでなく、ブックカフェ、レストラン、ダイニングなどが立ち並ぶリゾート「星野エリア」は今年の6月にオープンしたばかりらしい。そのエリア全体が木々に囲まれているのだが、自然が存分に生かされた建築デザインに感動を覚えた。ベースとなる素材はもちろん木材で、ライティングもオレンジ色の優しい灯りで統一されている。川の流れる音も計算されているのか、とても雰囲気にマッチしている。温泉から出た後も髪が乾いてしまうくらい、エリア中を歩き回っていた。温泉が目的だったのに、その場所の雰囲気だけで評価がうなぎ上りだ。改めてデザインの奥深さと重要さに気づかされた瞬間だった。温泉というサービス内容よりも、それを取り巻く付加価値(今回は建築デザイン)によって、満足感が全く異なるという事を知った。やっぱり良いものは良い。多少お金が掛かっても、それ分「一流」を体感できるのなら、惜しみなく投資したいと思う。

モテたい、有名になりたい、豊かな生活がしたい、そうした願望は誰もが持っている。今の日本では手に入らないモノはないし、それなりの努力をすればそれなりに充実した生活を送ることができる。成功を収めている人はほんの一握りで、私たちとはどこか次元の違う存在として扱われている。彼らが執筆した啓発本を読んで多いに影響を受け、彼らが集うパーティーに参加するだけで成長した気になっている。だが、彼らは生まれながらのスーパーマンではない。才能という言葉だけで片付けるのにはあまりに早計だ。それ相応の理由があって成功しているはずである。受験をする、就職をする、恋人をつくる、それなりの努力をすればそれなりの成功があるという理屈が通るのなら、ケタ違いな成功をする人はケタ違いな努力をしているという、とても単純明快なことではないだろうか。では、そのケタ違いの努力をするための動機は何なのだろう。モテたい、有名になりたい、豊かな生活がしたいという漠然とした目的を持つだけでは、それなりの成功で満足して終わってしまうことが殆どではないだろうか。それではいけない、それでは軽すぎる。もっと貧欲でなければならない、欠乏感がなければならない。文頭で「今の日本」とした理由もそこにあり、私たちは満たされ過ぎている。欲が人間を支配しているのであれば、ぬるま湯に浸かっていても何も変わらない。勇気を持って熱湯に飛び込む、その先にある希望を見据えて、耐える。勇気、希望、忍耐、これら全てを抱き続けた人だけが事を成就させるのではないだろうか。そして、その希望が「動機」となるのではないか。希望とは「好ましい事物の実現を望むこと(wiki調べ)」である。まずは好ましい物事とは何か？実現するためにはどうすれば良いのか？それを本当に望んでいるか？を熟考する必要がある。そうすれば後は勇気と忍耐を持って行動し、ケタ違いの努力をすれば良いだけだ。言葉で言うのは簡単。できないということは、その程度の希望だったか、勇気がなかったか、忍耐がなかったかのどれかだろう。