【分野横断のすすめ】Webデザイナーが具えるべきコーディング知識

プロダクトデザインにおいて、デザインに機能性を持たせることはきわめて重要です。そしてスタイリッシュなデザインのためには、当該業界での経験や製品をよく知ることが、まずは必要不可欠であるでしょう。

同じことが、Webデザインにも当てはまります。特に、Webページやアプリケーションなどでは、デザインが収益やユーザビリティに大きくかかわってきます。こういった事情を考慮すると、Webデザイナーは、プログラマーとしての技量も持ち合わせている必要があるといえます。

本記事では、Webデザイナーが備えるべきプログラミングに関する知見について、まとめてみました。

 

ユーザーインターフェースデザインにおける知識

 

モバイルデバイスの普及でWebサービスが身近になった今、よりシンプルで使いやすいインターフェースが求められています。実際にインターフェースの機能を実装するのはプログラマーですが、より完成度の高い整合性のとれたインターフェースを作り上げるにはデザイナーにもある程度の知識が必要です。以下がその一覧。

 

・Ajax

Webサイトなどをリフレッシュすることなく情報を更新する機能が実装できる技術

 

・API

違ったアプリケーションなどのコミュニケーションを可能にするツール

 

・CSS

HTMLを装飾や配置するために必要なプログラム

 

・Media query

CSSの要素でデバイスごとにメディアを最適化するための技術

 

・Responsive Web Design

デバイスの画面の大きさに合わせたコンテンツを表示するためのデザイン

 

・UI

ユーザーがWebサイトやサービスを使うためのインターフェース

 

・UX

ユーザーがサービスの利用などから得られる経験

 

自問自答して確かめる

 

技術が発展し、Webサイトやサービスの多様化が進むとどのようなデザインをすれば正解なのか、迷ってしまう事があります。多くのユーザーを獲得できて、多くの収益を上げることが出来ればおおよそ成功だと呼べるのですが、そうはいってもデザインの世界には完全な正解は存在しないといえます。優れたデザイナーは、その仕事過程の中で、自問自答によって自分のデザインの合理性を確認しています。例えば、以下のような質問です。

• ユーザーはこのコンテンツや機能を今どのように使っているのか
• 誰がサービスを提供又はWebサイトを運営しているのか
• そのサービスはどのような問題を解決しようとしているのか
• どのような目的、ゴールを持っているのか
• 特長と呼べる機能はなんなのか
• 完成版はどのようなかたちか
• 技術的な制約は存在するか

 

シンプルさと方向性について熟慮する

 

サイト上のどの要素も、簡単に定義でき記述できるようなシンプルな目的を持っているのでなければなりませ（クリックすれば支払い、クリックすればスクロール、等々）。もし文章化することができないようなら、デザインストラテジーが変更されるべきなのです。

 

コードを学ぶ

 

プログラマーの行き方で物事を考えるには、やはり最低限度のコーディングスキルが必要です。

つまり、少なくとも簡単な変更をしたり、他のデザイナーやプログラマーと話したりするために必要な程度に、ということです（加えて、コードスキルがあれば、実際にデザインに下のように心憎いエフェクトを加えたりもできます）。

 

（※画像をクリックするとリンク先に飛びます。）

 

このように、機能をデザインに落とし込んでいくという技量もまた、今日では、デザイナーのスキルとして求められているのです。

成功するWebサイトを作るには、デザイナーもプログラマーが考えるように考えることが必要な場面があるからです。

少なからず技術的知識とユーザー視点を持つことが出来れば、デザイナーとして重宝されるはずです。

 

（※本記事は、Coding for the Non-Coder: Designers Can Think Like Developersを翻訳・再編集したものです。）