Webデザイナーが覚えておきたいコーディング&プログラミングの基礎知識

この記事ではWebデザイナーの方が、エンジニアの仕事を理解する上で役立つコーディングについて解説します。

Webデザイナーがコーディングを学習するメリットや、コーディングの基礎知識（データ構造、MVC、集約etc…）、さらにはWebデザイナー向けのコーディング学習サイトも紹介しています。

「コーディングについて学びたいけど、何から手をつけていいか分からない……」という方は、ぜひこの記事を参考にしてみてください！ Webデザイナーとしてのキャリアアップにきっと繋がるでしょう。

Webデザイナーがコーディングを学ぶメリット

メリット1. エンジニアの考え方や仕事の進め方を理解できる

「恋人の心を理解できたら、もっと関係がうまくいくのに……」と思ったことはありませんか？

これと同じことが、Webデザイナーとエンジニアの間にも当てはまります。

たとえばUIは、Webデザイナーの活躍の場です。しかしその一点にフォーカスするのは、建物の表面部分だけを建築するようなもの。優れたWebデザイナーは、技術基盤を充実させることがWebデザインそのものを向上させることを理解しています。

InVisionのデザイン教育担当VPであるアーロン・ウォルター氏も、Toptal Design Talksの記事で以下のように語っています。

「HTMLやCSS、JavaScriptなどの知識は、デザイナーにとって決して害にはなりません」

▲コーディングがすこしでもできれば、きっとチームに貢献できるはず 

Webデザイナーがエンジニアの考え方や仕事の進め方を知っておくこと、チームにとって大きな資産になります。クライアントにも、より間違いのないアイデアを提供できるようになるはずです。

メリット2. 雇用機会が増える

Webデザイナーがコーディングの知識を身につけると、日々の業務だけでなく、新しい仕事を探すときにも役立ちます。

とくにスタートアップ企業の多くは「ハイブリッド型の人材」を求めています。

応募者のうち合格者が3%未満という、エリートエンジニアの派遣会社Toptalも、二足のわらじを履く専門家に期待を寄せているようです。

▲コーディングを学べば、意外な機会に恵まれる可能性も

それでも新しい分野の学習に躊躇してしまう人はいるでしょう。もちろん深い知識を身につけておくに越したことはありませんが、他のWebデザイナーと差をつけるには、すこしHTMLとCSSをかじっておく程度でも十分です。

スタートアップ企業に転職したり、フリーランスとして働きたいWebデザイナーの方にとって、コーディングは大きな武器となるでしょう。

Webデザイナーが学んでおきたい言語

【基礎編】「HTML」と「CSS」

Webデザイナーがコーディングを学ぶときに、まずおすすめしたいのが「HTML（Hyper Text Markup Language）」と「CSS（Cascading Style Sheets）」です。

これらはマークアップ言語といい、プログラミングのロジックを必要としないため、コーディングをやったことがないWebデザイナーの方でも簡単にはじめられます。

HTMLは「ブラウザに表示するものを指示する」コード、CSSは「ブラウザでの表示方法を説明する」コードです。

HTMLを人体の「骨」とするなら、CSSは「身長／体の形／肌／目の色／髪の色」を決定するものといえるでしょう。実際にはCSSは、タイポグラフィ、色、位置、大きさなどを指定する役割を担います。

フロントエンド（HTML／CSS）のコーディングについて学習すれば、デバイスごとの表示方法がわかるようになります。

またHTMLとCSSに触れると、すべてが「ピクセル単位」で調整されていることにも気づくはずです。

コードの構造、つまりWebページが表示される仕組みを理解すれば、フロントエンドの開発プロセスをより深く理解できます。どのようなWebデザインが簡単で、反対にどのようなWebデザインが難しいのかがわかれば、エンジニアとの連携も上手くでき、作業の効率も上がるでしょう。

【応用編】「JavaScript」と「Ajax」

JavascriptとAjaxは、HTMLやCSSと比べると難度が上がります。しかしこれらも、Webデザイナーの強い味方になってくれるコーディングです。

JavaScriptとAjaxの知識は、とくにUIにおける「特定の機能のデザイン」など、洗練されたアイデアをエンジニアに伝えたい際などに役立つでしょう。

難度は高いものの、基本的な知識をおさえておくだけで、他のWebデザイナーとは大きく差をつけられます。なぜならHTMLやCSSを触れるWebデザイナーは多くても、JavaScriptやAjaxを触れるWebデザイナーは多くないからです。

JavaScriptとAjaxの知識は、多くの企業やチームにとってユニークな資産となりえます。

▲JavaScriptのみで作成したタイムライン（出典：histography.io）

特にJavaScriptを使えるようになると、可能性が一気に広がります。JavaScriptは、HTMLとCSSの両方を変更／更新でき、データを計算／操作／検証できるのが特徴です。要素にアニメーションをつけたり、インタラクティブにしたり、バックエンドとのレスポンシブなコミュニケーションを作るときに役立ちます。

まだWebの世界が発展途上だった2000年代初頭、FantasyやFirstbornなどのデザインエージェンシーは、JavaScriptを革新的かつクリエイティブな方法で利用し、Webデザイン界隈に衝撃を与えました。

関数、オブジェクト、ロジック、そして数学、数学、数学……と考えると難しそうですが、実際にはそれほど学習難度は高くありません。他のWebデザイナーと差をつけたい場合はぜひ学習してみてください。

Webデザイナーが学んでおきたいプログラミングの基礎知識

知識1. データ構造（オブジェクト）

この章では便宜上、データ構造を「オブジェクト」と呼ぶことにしましょう。

データ構造（オブジェクト）とは、関連するデータやそのデータに使われるメソッドをまとめた「入れ物」のことです。

たとえば氏名と生年月日から、現在年齢を取得するメソッド（単純にその人物の生年月日と当日の差異を計算し、年齢の数字を返すだけのメソッド）を持った「Person」というオブジェクトがあるとします。

以下はSwiftというプログラミング言語で書かれたコードの一部です。（※Swift開発者の方へ：これよりも良い計算型プロパティの書き方があると思いますが、これはSwiftチュートリアルではないことをご理解ください）。

// Swiftでコメントを挿入したい場合、行の初めに2つのスラッシュを入れます
// こうすることでプログラマーがコードについて説明できます
// コードの動作に影響は与えません
// データ構造（Swiftでは「構造体」という）のタイプを ‘Person’ と宣言します
struct Person {
// 以下のような、構造に格納する関連データをプロパティといいます
var name: String
// プロパティには意味のある名前をつけます（”name"、"surname"、"birthDate"など）
// そのプロパティが何であるかを、自分や他のエンジニアが理解できるようにする必要があります
var surname: String
// 通常、格納されるデータのタイプを書きます：
// 文字の String や Date など
// （これ自体がもうひとつのオブジェクト。オブジェクトを囲い込み、階層を形成できます）
var birthDate: Date
// これはメソッド（Swiftでは ‘func’ という）です
// 年齢を計算し Int（整数を意味する） を返します
func getAge() -> Int {
// 差異を計算し年数を返します
}
}

では、データ構造（オブジェクト）はWebデザインにおいて、なぜ重要なのでしょうか？

それはアプリのデザインをする際、Webデザイナーは『Sketch』や『Adobe XD』などで使われるオブジェクトを使っているからです。

デザインツールにおけるアートボードや記号はすべてオブジェクトであり、それらが階層を形成していきます。（通常、他のアイテムを囲い込んで複数のアイテムの階層を形成しています）

つまりWebデザイナーがデザインしたものは、コード上でもオブジェクトになるのです。デザインからコード上でのオブジェクトへと、そのまま1:1で変換されるわけではありませんが、これが大まかな仕組みです。

▲ステータスバーを構成するアイテムの階層がAdobe XDで示された様子

知識2. Model-View-Controller（MVC）

多くエンジニアは、Webデザインのオブジェクトをグループ分けするのに「Model-View-Controller（MVC）」というデザインパターンを使います。これを使うことで、コードの管理が簡単になるからです。

MVCにおいて、それぞれのグループが以下のように機能します。

• コントローラー（Controller）：
  コントローラーは、2つのパーツをくっつける「接着剤」の役割をします。このオブジェクトは、インプット（ユーザーが「削除」ボタンを押す行為）を受け取って処理し、割り当てられたアクション（選択された連絡先をデータベースから削除する）を実行し、更新するようビューに指示を出します（削除された連絡先をリストから消去する）。
• モデル（Model）：
  Modelは、「システムが扱うデータ」を表したものです。人物についてのデータを格納する場合、上記で紹介した’Person’オブジェクトがモデルとなります。コントローラは通常データベースに接続し、情報をリクエストします。このリクエストの結果が、データで満たされた’Person’オブジェクトです。
• ビュー（View）：
  ビューは、階層の一番下のスクリーンから一番上まで、すべてのコンポーネントを階層に入れたユーザーインターフェースの「背後にあるコード」です。先程取り上げたボタンはオブジェクトの例で、オブジェクトは多くのばあい複数の他のオブジェクトを含みます。例えばボタンの場合、テキストラベルを表すオブジェクトを持っており、そのラベルの外観を指定するデータが含まれています。

通常、スクリーンにつき1つのコントローラーがあり、2つの他のグループにさまざまなオブジェクトが存在します。Webデザイナーが作るUIコンポーネントは少なくとも1つのオブジェクトによって構成されるのが一般的ですが、より多くのオブジェクトを持つことも可能です。

これはまさに、WebデザイナーがUIをデザインする際にしていることと同じではないでしょうか？

ストーリーボードを作り、図形やラベルを配置し、それをボックスインボックス構造の階層に並び替える等々……。それぞれの図形はサイズ、背景色、線など、そのプロパティを示す値を持っています。

そしてこれこそが、データ構造（オブジェクト）なのです！

これを記号にすると、オブジェクトは再利用可能になります。

知識3. 集約

先程申し上げたように、オブジェクトは他のオブジェクトの階層下に入れられます。

こうすることでプログラマーは関連する機能群を「独立したコンテナ」に分けているのです。小さなブロックから、より複雑なものを構成することから、この一連の作業は「集約」と呼ばれています。

さて、Swiftの例で’Person’構造体について取り上げた際、この構造体はもうひとつのオブジェクトを含んでいると説明しました。「人物の生年月日の情報」を持つ、Dateタイプのオブジェクトです。日付の格納に関するすべてのデータを、他の場所でも使えるオブジェクトに入れたのは正解でした。

また、Dateオブジェクトはオペレーティングシステムにあらかじめ備わっています。これはエンジニアがゼロからすべてを作ることなくDateオブジェクトを使えるように、Appleによって用意されたものです。Swiftには標準で備わっている機能なので、あとは好きな日付を格納するだけです。UIをデザインする際に使う記号のライブラリと同じものだと考えてください。

エンジニアは作業するアプリケーションに、固有のオブジェクトだけを作成する必要があります。ひとつの例として’Person’オブジェクトを紹介しましたが、実はこれを少しアップグレードする手法もあります。名と姓を統合して、PersonNameComponentsというあらかじめAppleによって用意されたオブジェクトを使う手法です。このオブジェクトは人物の名前を構成するすべてのパーツを含められます。ミドルネームなど、特定の文化において存在するデータを格納するのにも対応しています。

知識4. 継承

開発において、オブジェクトは他のオブジェクトを「継承」することがあります。

「継承」の説明に使われる一般的な例を紹介しましょう。まず’Animal’というタイプのオブジェクトと、その’Animal’を継承する’Cat’と’Dog’というタイプのオブジェクトを作ります。

▲’Cat’は’Animal’で、’Dog’も’Animal’である。’Cat’と’Dog’は、’Animal’からメソッドを「継承」している

‘Cat’と’Dog’はどちらとも、’Animal’が持つすべてのデータを持っている他、’Cat’と’Dog’だけに追加されたデータも持てます。

‘Cat’にnyaaan()メソッドを、’Dog’にwaooon()メソッドを加えます。’Animal’がeat()メソッドを持つ場合、’Cat’と’Dog’のどちらもeat()メソッドを持ちますが、nyaaan()メソッドは’cat’のみ、waooon()メソッドは’Dog’のみ持つことになります。

ではUIデザインの点において、継承はどのように変換されるのでしょうか？

例えばWebデザイナーが、iPhone向けアプリのカスタムUI要素をデザインしたとします。これを実際に機能させるため、エンジニアはコードを書く必要があります。

しかし、エンジニアはまるっきりゼロからコードを書きません。

UIViewと呼ばれる、オブジェクトを継承する新たなカスタムオブジェクトを作成します。iOSのUIViewは画面表示エリアを管理するオブジェクトで、オペレーティングシステムがスクリーン上に表示するために必要なメソッドをすべて備えています。

また、UIControlを継承する場合もあります。UIControlはUIViewを順番に継承しますが、ユーザーが触れたり変更したりするものに関する機能の追加も行います。例えばUIButtonはUIControlを継承し、ボタンに特化したデータや機能を追加します。

▲出典: John Barkiple, Unsplash

知識5. オブジェクト間のやり取り

オブジェクトとデータ構造は、お互いにメッセージをやり取りします。

先程取り上げたメソッドを思い出してください。’Person’オブジェクトのgetAge()や、’Cat’オブジェクトのnyaaan()といったものをメソッドといいます。その他のオブジェクトはこれらのメソッドを呼び出し、応答を得られます。

では、このしくみはMVCのデザインパターンでどのように機能するのでしょうか？

「メッセージを削除する」ボタンのUIをデザインしたとします。エンジニアはこのデザインを以下のようにコードに変換します。

1. コントローラを「メッセージ一覧」を表示するスクリーンに割り当てる
2. ユーザーがボタンを押した際にコントローラにメッセージを送るよう、ボタンを構成する

こうしてすべてを一緒に繋げるのです。

ユーザーがメッセージの横にある削除ボタンを押した際、以下のようなことが起こります。

1. ボタン [ビュー] → コントローラ：おーい！いま僕押されたよ！メッセージ#34を削除して！
2. コントローラ → データベース：おーい！メッセージ#34を削除してだってさ！
3. データベース → コントローラ：オーケー、削除したよ！
4. コントローラ → データベース：更新されたメッセージ一覧をちょうだい！
5. データベース → コントローラ：はい、どうぞ！メッセージ [モデル] を送るよ！
6. コントローラ → ビュー：更新されたメッセージ一覧だよ！更新して！

お気付きの方もいるかもしれませんが、ボタンはただコントローラに「メッセージ#34を削除して！」と指示を飛ばしただけで、それに関する応答は受け取っていません。これはそのように設計されているからで、指示を出して後のことは関知しません。

ここでコントローラは、メッセージを受け取った後にボタンをこれ以上押せないようにして、スクリーン上にスピナー（ローディング時のくるくる）を配置することもできます。このようにすれば、ユーザーはメッセージが削除されたことがわかるため、優れたUXデザインだといえます。

コーディング&プログラミングを学習できるWebサービス

学習サービス1. ドットインストール

広く浅くコーディングの知識をつけたい方におすすめのWebサービスです。HTMLやCSS、JavaScriptなどの講座を無料で受けられます。

プレミアム会員（月額1,080円）になれば、Webサイトやアプリの作成などの実践的な内容を学習できるのでそちらもおすすめです。

ドットインストール

学習サービス2. CODEPREP

「手を動かして学ぶプログラミング」「毎日10分の成功体験」を掲げる無料のプログラミング学習サービスです。

講義は、大きく分けて入門編、基礎編、実践編の3つに分かれており、入門編ではHTML、CSS、JavaScript、PHP、jQuery、Ruby、Bootstrap、Java、Scalaなどの言語を学習できます。

講義の大半は穴埋め形式で進められるので、コーディング初心者でも安心して始められるWebサービスです。

CODEPREP

学習サービス3. Progate

全14コース、76レッスンを無料で受けられるWebサービスです。HTMLやCSS、JavaScript、jQueryなどの言語を学習できます。

Progateはスライド学習を採用しているため、自分のペースで予習や復習を行ええるのが魅力です。

スキマ時間で効率的にコーディングの学習をしたい方におすすめ。

Progate

いずれはAIが、フロントエンドの仕事を奪う？

「コーディングを学ばなくても、いずれAIがすべて賄うようになるのでは？」と思っている方もいるかもしれません。これについては、Webデザイナーのあいだでも意見が割れています。

ドラッグ&ドロップさえすれば、AIがすべてをコード化してくれるようになれば、フロントエンドエンジニアの仕事はなくなってしまうでしょう。しかし当然ですが、すべてがいきなり劇的に変わることはありません。

少なくともしばらくの間は、コーディングもできるWebデザイナーには高い需要があるはずです。

まとめ

Webデザインがエンジニアの手によってコード変換される時に何が起こるか、その大まかな全体像が見えてきましたか？

この記事では以下のことを学びました。

• 「HTML」と「CSS」：
  コーディング初心者でも簡単に学習できるマークアップ言語
• 「JavaScript」と「Ajax」：
  他のWebデザイナーを差をつけたいときにおすすめの高度な言語
• データ構造（オブジェクト）：
  関連するデータと、そのデータに実装する機能をグループ分けしたものの入れ物
• MVCパターン：
  オブジェクトを役割ごとにグループ分けするのに使うデザインパターン
• 集約：
  他のオブジェクトを含むオブジェクト。デザインアプリ上での階層と同じような概念
• 継承：
  あるオブジェクトを取り、その時の用途によって必要な特定の機能を追加することでそのオブジェクトを拡張すること
• オブジェクト間のやり取り：
  全体が「機能」するように、MVCにおいてすべてを一緒に繋ぐこと

ここまでコーディングとプログラミングについて理解していれば、次にエンジニアと一緒に仕事をする際には幸先のいいスタートが切れるでしょう。

この記事で学んだ内容を、ぜひ普段の仕事に活かしてみてください。

原文：Paul Pela
翻訳：Tamura Yui
編集：木村優美

こちらもおすすめ！▼