webデザイナー、またはUI/UXデザイナーをやっている方で、プログラミングまでやっている人はどれくらいいるでしょうか？

私は過去にJavascript、PHP、Javaなどいくつか言語を学んできています。実際に業務に生かせるものから、趣味レベルとかなりばらつきはありますが、プログラミングを学んで、単にHTML、CSSのみのコーディングスキルのときから仕事をするときの視点や、やれる範囲が良い意味で変わったと感じています。

過去に関わったことのあるデザイナーの中では、プログラミングといえばJavascriptやjQueryがちょっとできるけど得意ではない。基本的には自分で作るよりはエンジニアに頼んで作ってもらう、という人が多いように感じます。

もちろん得意不得意という点でも、専門領域ではないという点でもプログラミングをデザイナーがわざわざ学ぶ必要はないのかもしれません。
ですが私が実際学習したことで業務で生きる場面が多くあり、基本的にマイナスの面はないと感じているため、それらを今回まとめてみたいと思います。

太齊 香奈（たさい・かな）
incert_87479_01
株式会社メンバーズ メンバーズユーエックスワンカンパニー所属 UI/UXデザイナー
現在は常駐先企業でUIデザイナーとして勤務
関心事：アプリ作成、イラスト作成。

デザイナーのプログラミング学習のメリット

デザイナーのプログラミング学習のメリット

1.コーディングに使うファイルがわかる

コーディングをやるデザイナーの場合html、cssだけでJavascriptはちょっとだけ…くらいのスキルセットの人はいると思いますが、これだけの知識だとフレームワークの中ではどこにコーディングをすべきなのかが分からない可能性があります。

例えばLaravelというPHPのフレームワークですが、ControllerというPHPのプログラムを記載するファイルの中に、それぞれのページを表示する時に使うファイルのパスが記述しているため、そこを見ないと使われているHTMLがどこに書いてあるのかがわかりません。
というのもフレームワークを使っている場合、HTMLが書いてあるファイルは、URLのパスとイコールの階層には無いからです。

単純なページだったらHTML内にかかれている文言などでファイルを一斉検索すれば見つけれるのですが、条件分岐などでHTMLを分けている場合などは、それを理解していないと自分が何をしているかすら分からなる可能性がありますし、似たファイルがたくさんあるときは検索も時間がかかってしまいます。

これを自分で調べるとしても答えが書いているはずのフレームワークの公式サイトは、基本はエンジニア向けのサイトです。サイトの内容が理解できればそこで解決できますが、基礎知識がないと難しいです。
またこれらをエンジニアに聞くにしても基礎知識があるのと無いのでは、質問のしやすさが変わってきます。

2.必要なパーツの把握がしやすくなる

画面デザインを作る時に、エラーやパターン違いなど、条件によって出すデザインを複数作る必要がある場合がありますが、プログラミングの知識があると、ある程度必要なものが想像しやすくなります。

例えばレシピサイトの検索結果の画面デザインを作るとします。
検索フォームには、レシピの素材名を入力するとした場合、検索結果はデータベースに入っているものから持ってくる仕様となりますが、入力した素材名によって結果の表示が変わってくるはずです。
リストにすると例えば下記のような画面が必要になります。

  • 検索結果が複数の場合で、奇数、偶数など検索結果数でデザインが変わるパターン
  • 検索結果が複数の場合で、ブラウザのリサイズで1行あたりの数が変わるパターン
  • 検索結果が0件のパターン
  • 検索結果が1件のパターン
  • 検索結果が複数で、スクロールしないと全件見れないパターン

ワイヤーを用意してくれるディレクターなどがいる場合は、最初から指示などがあると思いますが、中小企業だったりベンチャーのような人数が少ない組織の場合は、デザイナーが自分で情報整理をして作るべき画面を考える必要があります。

そのような状況でも、自分で実際のプログラムを読んだり、自分だったらどう作るのか？ということを考えると、どんなデザインが必要なのか考えやすくなります。

3.フロントエンドとバックエンドの関係性がわかってくる

上記でControllerというエンジニアがプログラムを記載するファイルの中に、表示するHTMLのパスが記述している、と書きました。
要するにバックエンド（PHP）→フロントエンド（HTML、CSS、Javascript）の順でファイルを読み込まれているわけなのですが、デザインを作るときにもこれを理解しておくと仕事がやりやすくなります。
というのも、デザインを実装するときに表示の分岐をフロントでやるのか、バックエンドでやるのかの判断がある程度できるようになります。

例えば現在いるページを何かの条件でプログラムで判定して、特定のメニューをアクティブ状態にするためのCSSを当てるとします。
条件分岐は、PHPでもJavascriptでもできることが多いです。でも実行する順番としては、PHPのほうが先になります。
Javascriptは更にHTMLを読み込んだ後に実行されるので、メニューのようなファーストビューに入るものに使うのは、場合によっては読み込みの時にガタつきが出てしまいます。

なので、この場合のメニューをアクティブにする時は、HTMLより先に読み込んでくれるPHPで行うほうが適切だったりします。
ただしこちらの例はあくまで実装方法の一つなので、実際の案件にの仕様に合わせて検討が必要です。

また、これらを自分で実装しない場合も、フロントエンドが得意な人なのか、バックエンドが得意な人なのかなど、誰に実装してもらうことになるのかの判断ができるようになるはずです。

4.WordPressのカスタマイズの難易度が下がる

WordPressはPHPを学ぼうとした理由の一つですが、PHPの基本がわかるようになったことで学習のハードルが下がりました。
WordPressは使っている人も多いので、情報源も本やネットで大量にありましたが、以前はドキュメントを読んでも何を書いているのか読んでもわからなかったものが、100%わからなくても大体のイメージがつくようになりました。

私の場合、実務ではWordPressを使うことは多くはありませんが、自分の作品集を作ったりするときにも利用しています。
データベースに既に入れている情報を、テンプレートを新しくして、新しいデザインにそのまま適用できるのはとても便利です。

また、WordPress自体は使っている人は多いのですが、デザイナーで実際詳しいという人はあまり会ったことはありません。
色々な経験をしておくほうがweb業界ではメリットがあると思いますが、WordPressも使えていると静的なサイトだけしか作れないよりも評価されることが多いです。

まとめ

私自身、デザイナーとして働いてきてプログラミングを学ぶことについては、そこまで意味があることだと感じてませんでした。
しかし、実際学んでみて実際の業務で生きる場面が多くあり、また、違う分野への興味が湧く機会が多くなったことで、仕事のモチベーションが上がったりと良い事が多かったと思ってます。

プログラミング自体はデザイナーにとってはハードルが高いものですが、何度挫折しても最終的にできればいいのですから、まずは挑戦してみて欲しいと思います。