calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ

Web_Design_Skills

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

アートディレクター

Webデザイナー

フロントエンドエンジニア

イラストレーター

フォトグラファー

アートディレクター

デザイン面の総括を行うアートディレクター。クライアントとの窓口になり、案件全体の設計に携わります。デザイン知識（フロントエンド・デザイン全般）・アクセシビリティ・UI・UX、もちろん技術や知識だけでなくコミニケーションやマネジメント力も必要です。

１．アクセシビリティ

accessibility_design

アクセシビリティとは情報への「アクセスのしやすさ」の度合い。身体的なハンデや高齢者だけじゃなくて、健常者を含めた多くの環境に対しても使い勝手や情報のアクセスがしやすくなるよう考慮する。すべての人が問題なくコンテンツや機能を利用できることです。以下アクセシビリティがよく分かるサイト。

２．ユーザビリティ

usability_design

ユーザビリティを一言でいうと、利用者の「使いやすさ・使い勝手」を表したもの。ユーザーインターフェイスとは人間の目の前に表示される操作体系のことを指します。

３．UX（ユーザーエクスペリエンス）

ux_design

UX（ユーザーエクスペリエンス）はユーザーが製品やサービスに触れたときの「心地よさや楽しさ」などの感情を引き起こすなどの、一連の操作から得られる体験を意味します。

４．IA（情報アーキテクチャ）

ia_design

情報を分かりやすく伝えること。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。データが情報に変換され、最終的にユーザーの知識に昇華されるプロセスが大切です。情報デザインについては理解の段階に詳しく書かれてあります。

５．画面設計（ワイヤーフレーム）

wireframe_design

画面を設計するときの初期段階の画像イメージであり、最終的な仕様書にもなります。ページの骨格を決めるものですね。デザイナー・コーダー・システムと色々な担当者に触れるので、共通の認識を持つためのコミニケーションツールといえます。

６．進行管理

ongoing_design

進行管理や工数の割り出しも重要な役割になります。以下、プロジェクト進捗管理やマネジメントに関する記事。

Webデザイナー

Webデザイナーはウェブページのビジュアル担当。コーディング以外では、写真・イラスト・タイポグラフィ・ロゴ・ボタン・バナーなどウェブページとしてレイアウトをデザインします。他に知っておきたい考え方は、SEO・アクセシビリティ・UI・UX・IA（情報を分かりやすく伝える）等の知識など。企業や商品のイメージに応じて配色を決めたり。以下デザインのルールやセオリーを熟知するために必要なまとめです。

７．レイアウト・フォントの知識

illustration_font_design

レイアウトの基本を、直感やセンスではなく、基礎知識（要素や原則）で向上させるための記事まとめ。視覚度・図版率・ジャンプ率・余白・グループ化など。スライドは欧文書体の種類、文字の太さと字幅、雰囲気などフォントの超基本的な部分から解説してあります。

８．配色

color_scheme_design

配色に関するスライドで有名なものをメモ。この上なくわかりやすく解説してあるので基礎を学ぶのに最適です。

９．Illustratorの使い方

use_illustrator_design

アピアランスやクリッピングマスクにカーニングなど知っておきたい半歩進んだテクニック集。

１０．Photoshopの使い方

use_photoshop_design

フォトショップを最初に扱うときにやっておきたい設定、イラレのように直接図形を選択できたり、ブラシで描いた時に端がぼやけないようにする方法など。質感の出し方、レトロ感の出し方も参考になります。

banner_created_design

Webデザイナーさんはビジュアル部分を担当するので、写真・ロゴ・ボタンなどをデザインすることが多いと思います。こちらはバナーデザインを効率よく進めるための制作プロセスや土台の作り方など。バナーを直接貼って解説してあるので分かりやすいですよ。

１２．ボタン作成

button_creation_design

CSS3の登場によって画像を使わずにボタンを作る人が増えています。以下、CSS3のみでボタンを作成するための方法。

フロントエンドエンジニア

フロントエンドエンジニアはデザインデータをブラウザでウェブページとして表示できるようコーディングを行います。デザイナーとプログラマーとの間を繋ぐイメージ。最近では設計の段階からプログラマーと担当範囲や仕様を相談してプロジェクトを進めるようになってきました。ちなみにフロントエンドとはユーザーから見た表側の画面のことで、ユーザーインターフェースを意味します。

１３．HTML5

html5_design

HTML5は従来に比べて記述がシンプルになったので、マークアップにかかる工数を減らせるというメリットがあります。style要素が条件付きでbody要素内に書けるようになったり、開始終了タグ、type属性の省略、新要素の追加など、ソースコードも読みやすく記述できます。タグはHTML5リファレンスで。

１４．CSS3／Sass

css3_design

CSS３で実装されたプロパティやセレクタを使うと、従来画像にしていたものをCSSだけで表示したり、無駄なHTML要素を減らしたりできます。また速度に対するユーザーの要求も高くなってきてるので、読み込み速度や表示速度のテクニック、フロントエンドで解決できるデバックのスキルも身につけなければいけません。

１５．javascript

javascript_design

ページに動き（計算結果、絵を動かしたり）を出したければJavaScript。コピー＆ペーストだけで、動くものができてしまいます。筆者の会社ではデザイナーさんもプログラマーさんもJavaScriptに関して勉強している人が多いです。アプリ制作にも役立つので習得必須です。以下、JavaScriptやフロントエンドに関する記事。

１６．jQuery

jquery_design

JavaScriptの命令を手軽な書き方で記述できるjQuery。CSSが分かるデザイナーやマークアップエンジニアが簡単に習得できるように設計されています。アニメーション効果（スライド、フェードイン、ツールチップなど）をつけたりできます。

１７．WordPressテーマ作成

wordpress_design

会員制サイトはXOOPSを使いますが、検索ナビサイトやコーポレイトサイトはワードプレスで構築します。SEOに有利なようにカスタマイズしたり、お客さん側の管理のしやすさからWordPressを使うことが多くなっています。プラグイン少なめでオリジナルテーマを作ると勉強になると思います。以下オリジナルテーマを作成する上で役立つサイトです。

１８．EC-CUBE

eccube_design

筆者の会社はECサイト構築をする場合、EC-CUBEをカスタマイズします。通販サイト構築依頼は結構多いので習得しておきたいところです。php・サーバー関係・プラグイン開発はプログラマー、デザイン全般やSmartyはデザイナーさんといった感じで担当しています。EC-CUBEプラグインは競合が少ないので、今なら有料プラグイン開発だけで安定した収益源を確保することも可能です。

イラストレーター

クライアントの要望に応じてキャラクターや挿絵・地図などのイラストを作成するイラストレーター。最近アバターやオリジナルキャラなどの需要が増えてきたので今後伸びそうです。Webデザイナーが兼務している場合が多いと思います。

１９．イラスト作成

illustrations_design

プロのマンガ家やイラストレーターが教える絵の描き方、イラスト料金相場、上達方法、キャラクターの作り方など。

フォトグラファー

サイトのイメージや広告などに掲載する写真を撮影するフォトグラファー。カメラ・照明等・Photoshopなどの知識が必要です。SEOではコンテンツ（オリジナルの文章・写真・動画）なども重要な要素の一つになると思うので、余力があれば勉強したいですね。

２０．写真を撮る

一眼レフの絞り・シャッタースピードから写真を上手に取るためのコツやテクニック、初心者必見のボリューム満載のまとめです。

スポンサード リンク

関連記事

Comments

  1. Twitter 人気のつぶやき 12/21～1/10 2014 | Webクリエイターボックス より:
    2014年1月11日 8:57 AM

    […] 8. Webデザイン：効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ […]

    返信
  2. Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG より:
    2014年4月14日 12:01 PM

    […] https://commte.net/4015 […]

    返信

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。