Webデザイナーとして大切なことは、セオリーとトレンドを押さえること ―― Webpark山谷三太氏インタビュー
Webデザイナー山谷三太氏のブログ
Webpark - ウェブサイト作成に役立つことをいろいろと
好きなことに関するWebサイトを作ってきたことが、長年続けてこられた理由
── 山谷さんがWebデザイナーとして歩み始めたきっかけは何ですか？またWebデザイナーとしてのこれまでの道のりを教えていただけますでしょうか？
山谷氏：Webサイトを制作するようになったのは2004年頃、好きな海外サッカーチームのファンサイトを作ろうと思ったのがきっかけです。当時はテーブルレイアウトが主流でした。サイトの横幅は800px以下がほとんどで、フレームを使ったサイトも多かったです。CSSもシンプルでしたし、様々なデバイスを意識することもなかったので、今に比べてWebサイトを制作するハードルは低かったと思います。
その後、投資などの趣味に合わせて色んなWebサイトを作ってきました。今思えば、好きなことに関するWebサイトを作ってきたことが、長年続けてこられた理由かなと思っています。現在、和歌山県に住んでおり、Webデザインを本業として生活しているわけではないのですが、Webサイト制作や運営などで独立できればな、という密かな夢を持って、日々新しい技術の習得に励んでいます。
── そうだったんですね。Webデザイナーとしてご就業されているわけではないんですね？これは驚きです。ということは、普段の生活の中でも限られた時間内で、サイト制作に携わっていることと思いますが、最近はどのような活動がメインになるのでしょうか？やはり、ブログ運営でしょうか？
山谷氏：はい。「Webpark」というブログ運営をメインに活動しています。2008年の立上げ当初は、FC2ブログのテンプレートの提供を行っていましたが、今ではCSSやjQueryを使ったサンプルの解説や便利なツールの紹介など、私なりにWebサイト制作に役立つと思う情報を記事にして掲載しています。ブログで紹介するサンプルは、そのまま使うのではなく、ユーザーが自分のサイトに合わせてカスタマイズできるようにできるだけ詳しい解説を心がけています。
最近は月に約1、2回更新し、Facebookページへの「いいね！」は3500を超えるなど、少しずつですが、注目していただくようになりました。ちなみに、サーバー代、書籍やソフトの購入に使うための収入を得られるようGoogle AdSenseも活用しています。また、昨年の2014年12月には、「Samprary」というWebギャラリーサイトを新たに立ち上げました。Wordpressで制作していて、個人的に気に入ったサイトを、使われている「色」とともに紹介しています。
CSSにしかできないことがある
── Webparkは、私も拝見しています。CSSについてわかりやすく解説されており、デザイナーではない私にも、サイト制作の理解を深めるために大変役立っています。ちなみに、Webデザインの中でも、特にどのような分野が得意と感じますか？
山谷氏：やはり得意な分野はCSS（スタイルシート）です。CSSは、CSS3の登場により、Webデザインの幅が本当に広がりました。グラデーションや角丸など、それまで画像を使っていた表現やJavaScriptを使っていた動きのある表現もCSSで対応できることが多くなりました。
CSSは日々進化していて、追いつくのは大変ですが、新しいことができるようになるのは本当に楽しいことです。ですので、私はCSSで実現できることはCSSで行うようにしています。手間がかかることもありますが、読込み速度的にも有利な場合が多いですし、CSSでしかできないことも多々あるからです。
例えば、3本線のメニューボタン（ハンバーガーボタン）を設置するとしても、画像やアイコン型のWebフォントを使えば簡単なわけですが、CSSで表現することもできます。手間はかかりますが、CSSで作ることによって、クリックした際に3本の線をそれぞれ回転させて、バツに変形させることなんかもできます。動きながらバツになることで、それが閉じるボタンに変化したことをユーザーにわかりやすく視認してもらえます。細かいことですが、動き一つで印象もぐっとよくなりますし、何よりもユーザビリティの向上にもつながると思います。
── なるほど。やはり、細部にこだわりを持ってやることが、他サイトとの差別化につながっていますね。まさにWebデザイナーとしての冥利に尽きると思います。普段は、どのようなツールをお使いですか？
山谷氏：パソコンはメインでWindows 7のデスクトップに23インチのディスプレイを、外出用のサブでMacBook Airの13インチを使っています。サイト制作を始めた頃は、ホームページ・ビルダーを使用していましたが、サイトの規模が大きくなるにつれテンプレート機能が欲しくなり、Dreamweaverを購入しました。MacBook Air でコーディングする際は、Sublime Textを使っています。Illustratorはどちらのパソコンにも入っています。SugarSyncを使い、2台のパソコンでデータを共有するようにしています。ブラウザは、以前はSleipnirを使っていて、Chromeがリリースされて以降は、Chromeを使っています。
セオリーを押さえ、その時その時の「トレンド」にアンテナを張る
山谷氏：書籍とサイトのチェックは常に心がけています。ちょうど職場から帰る途中に、品揃えの充実した書店があるので定期的に通って、興味があれば購入するようにしています。サイトのチェックについては、興味のあるサイトをFeedlyに登録しているのと、新しいWebサイトや情報の発見を期待して、毎日、はてなブックマークもチェックしています。
また、Webデザインの技術は、日本よりも海外の方が2歩も3歩も先を進んでいますので、海外のWebサイトもチェックするようにしています。英語は得意ではないですが、読むだけならある程度できますし、ソースコードは世界共通ですので、コードを見れば分野によっては大体理解できます。海外のWebサイトを訳して紹介してくれる便利なサイトもありますが、英語の勉強も兼ねて、元サイトもちゃんとチェックするようにしています。
また、英語の情報を得るという意味で、検索する時は英語でも検索するように心がけています。CSSで作るドロップダウンメニューを調べたいときは「CSS ドロップダウンメニュー」だけではなく、「CSS drop down menu」で検索するという感じです。
── 今、少しお話にありましたが、Webデザインの技術について、デザイナーの皆さまは、日本と海外の技術進歩の差について触れることが多いと思います。Webクリエイター専門の転職支援サービスを行う私たちは、Webデザイナーの社会的市場価値という視点から、業界の動向を見ることが多いのですが、やはりその点においても日本と海外では、給与面や待遇面など、差があることを感じています。では、日本はまだ、海外を追いかける側の立場にいるわけですが、Webデザインをする上で、山谷さんが心がけていること、または指針などはありますか？
山谷氏：はい。デザインには「セオリー」と、その時その時の「トレンド」があると思います。私は、その中でも特に「トレンド」をしっかり踏まえて、Webサイトの色を出すことを心がけています。昔でいうとWeb2.0風と言われていたようなデザインがありました（Web2.0が、直接的にデザインとつながるとは限らないのですが、当時はこのような言い回しが流行ったかと思います）。最近だと、フラットデザインやマテリアルデザインと呼ばれるものが、それに当たるのかもしれません。
アイコンを例にすると、以前は立体的、強めのグラデーション、大きな角丸などが好まれましたが、今はフラット、ベタ塗り、円形や正方形、角を丸くしたとしても小さめが好まれていますよね。レイアウト、配色、タイポグラフィなど、紙媒体のデザインと共通する部分については、「セオリー」も多いですが、Webデザインは歴史も浅く、その技術は日進月歩ですので、「トレンド」の移り変わりは激しいように思います。
Webデザインをする際には、「セオリー」を押さえることはもちろんのこと、その時その時の「トレンド」にアンテナを張り、しっかり押えることが大切だと思っています。
センスは、基本とトレンドを学ぶことで磨かれる。そう思うことで、日々のインプットが前向きに
── セオリーとトレンド。確かにおっしゃる通り、Web技術という移り変わりも激しい世界では、いかに速く「トレンド」を押さえるかが勝負ですね。ちなみに、山谷さんのWebデザイナーとしての経歴の中で、どこでその指針が築かれていったと思いますか？
山谷氏：デザインに携わる中で、皆さまもよく耳にするかもしれませんが、デザインにはセンスが必要だと言われます。センスとは何かというと難しい話ですが、生まれながらにして持っているものとイメージする人も多いのではないでしょうか。しかし私は、「基本的な技術の習得とトレンドをしっかりとらえることで、Webデザインのセンスは磨かれていく」と思っています。
以前、自分が作ったサイトを見てセンスがないな、とへこんでいました。センスがいいなと思うサイトをいくら真似したとしても、出来上がりは全然違うわけです。しかし、どうにか自分の理想に近づくために勉強を続けていくと、単なる自分の知識不足だと気付くようになりました。
「Webデザインの基本やトレンドをしっかり学ぶこと」で、センスのいいサイト作ることができると思いますし、そう思うことで様々な知識をインプットすることに前向きになることができました。
── 実際にデザインする中で学び得た言葉ですね。納得させられます。では、さらに一歩深く掘り下げて、山谷さんが考えるWebデザイナーとして必要なスキルとは？と聞かれたら何と答えますか？
山谷氏：本業ではない私が話すと、調子に乗るなと言われそうですが…、一つだけ明確に思うのは、目の前のスキルだけではなく、「日々勉強して、新しい情報や新しい技術の習得に努める姿勢が大切」だと思います。Webデザイナーとして、HTMLやCSSの基礎知識は当然必要ですし、技術的な引き出しは多い方が、様々な場面で必ず役に立ちます。また、見た目だけではなく、サイトに動きをつける際にどのようなことができるのかも知っておいた方がいいと思います。
3本線のハンバーガーボタンを繰り返し例にあげるとすれば、クリックした際のメニューの表示にしても、横に表示されたり、画面全体に表示されたりと、パターンは色々あります。メニューの現れ方にしても、スライドイン、フェードインなどがあるでしょう。たくさんの引き出しを持っておいて、いざという時に、そのWebサイトの目的、獲得したいターゲット、ユーザビリティ、ブランディングなども含めて、一番適したものをバシッと使えるようにしたいです。
── Webデザイナーの枠を超え、「仕事」に関する全てのことに通じることですね。私たちマイナビクリエイターは、これまでにも多くのWebデザイナーの皆さまの転職をサポートさせていただいてきました。これからも、日本のWebデザイナーの皆さまが、業界の枠を超え、様々な分野で活躍できるように、その環境づくりに努めていきたいと思っています。そこで、山谷さんは、今後日本にいるWebデザイナーが、どのような存在になっていくことを望んでいますか？
山谷氏：これまた恐縮する内容ですが…、私自身、Webギャラリーサイトを運営していることもあり、普段から国内外のサイトをたくさん見ています。悔しい話ではありますが、やはり海外の方がデザイン的にも技術的にも、まだまだ日本よりも先を走っています。
Webデザインの新しいトレンドや新しい技術は海外で生まれ、日本はそれを追いかけている流れは否めません。このような状況は、これからもしばらく続くとは思いますが、将来、日本から生まれたWebサイトが「Awwwards」のような場で、どんどん高い評価を受けるようになれば嬉しいです。
── ありがとうございます。最後に、Webデザイナーとして駆け出しだった頃の自分に、今、アドバイスするならどんなことを言いたいですか？
山谷氏：基礎をしっかり学ぶようアドバイスしたいです。私の場合、最初はHTMLとCSSから入って、必要に応じてJavaScriptやPHPなどを学んできました。しかし、JavaScriptやPHPは、その時に応じて必要な分だけできればいいやという感じで、基礎から学ぼうという姿勢が足りませんでした。
当然、基礎を理解していないので、後からコードを見直しても、なぜそのようになったのかすぐに理解できないことも多いですし、融通も利かないということになります。遠回りでも基礎からしっかり学ぶべきでした。ですので、駆け出しだった頃の自分にアドバイスしたいと思うと同時に、まさに、今もこれからも、Webデザインをする人間として、基礎から学ぶ姿勢を忘れずに、様々な技術の習得に励んでいきたいと思います。
