効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ作成:2014/01/6更新:2014/11/01WebデザインWeb制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。Linkもくじアートディレクター1.アクセシビリティ2.ユーザビリティ3.UX(ユーザーエクスペリエンス)4.IA(情報アーキテクチャ)5.画面設計(ワイヤーフレーム)6.進行管理Webデザイナー7.レイアウト・フォントの知識8.配色9.Illustratorの使い方10.Photoshopの使い方11.バナー作成12.ボタン作成フロントエンドエンジニア13.HTML514.CSS3/Sass15.javascript16.jQuery17.WordPressテーマ作成18.EC-CUBEイラストレーター19.イラスト作成フォトグラファー20.写真を撮るアートディレクターデザイン面の総括を行うアートディレクター。クライアントとの窓口になり、案件全体の設計に携わります。デザイン知識(フロントエンド・デザイン全般)・アクセシビリティ・UI・UX、もちろん技術や知識だけでなくコミニケーションやマネジメント力も必要です。1.アクセシビリティアクセシビリティとは情報への「アクセスのしやすさ」の度合い。身体的なハンデや高齢者だけじゃなくて、健常者を含めた多くの環境に対しても使い勝手や情報のアクセスがしやすくなるよう考慮する。すべての人が問題なくコンテンツや機能を利用できることです。以下アクセシビリティがよく分かるサイト。couldWebアクセシビリティ・ファーストウェブアクセシビリティ基盤委員会(WAIC)2.ユーザビリティユーザビリティを一言でいうと、利用者の「使いやすさ・使い勝手」を表したもの。ユーザーインターフェイスとは人間の目の前に表示される操作体系のことを指します。【スマートフォン向け開発】ユーザビリティチェックリストを作ってみたWebユーザビリティを改善するための5つのポイントと方法3.UX(ユーザーエクスペリエンス)UX(ユーザーエクスペリエンス)はユーザーが製品やサービスに触れたときの「心地よさや楽しさ」などの感情を引き起こすなどの、一連の操作から得られる体験を意味します。ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編4.IA(情報アーキテクチャ)情報を分かりやすく伝えること。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。データが情報に変換され、最終的にユーザーの知識に昇華されるプロセスが大切です。情報デザインについては理解の段階に詳しく書かれてあります。社内のIA(情報アーキテクチャ)研修の講師をしてみた。YATのBLOG5.画面設計(ワイヤーフレーム)画面を設計するときの初期段階の画像イメージであり、最終的な仕様書にもなります。ページの骨格を決めるものですね。デザイナー・コーダー・システムと色々な担当者に触れるので、共通の認識を持つためのコミニケーションツールといえます。進行管理や工数の割り出しも重要な役割になります。以下、プロジェクト進捗管理やマネジメントに関する記事。バシャログディレクション業務で普段から気をつけている10のこと。.comWebデザイナーWebデザイナーはウェブページのビジュアル担当。コーディング以外では、写真・イラスト・タイポグラフィ・ロゴ・ボタン・バナーなどウェブページとしてレイアウトをデザインします。他に知っておきたい考え方は、SEO・アクセシビリティ・UI・UX・IA(情報を分かりやすく伝える)等の知識など。企業や商品のイメージに応じて配色を決めたり。以下デザインのルールやセオリーを熟知するために必要なまとめです。ジャンプ率・余白・グループ化など。スライドは欧文書体の種類、文字の太さと字幅、雰囲気などフォントの超基本的な部分から解説してあります。配色に関するスライドで有名なものをメモ。この上なくわかりやすく解説してあるので基礎を学ぶのに最適です。ノンデザイナーのための配色理論9.Illustratorの使い方アピアランスやクリッピングマスクにカーニングなど知っておきたい半歩進んだテクニック集。Illustratorによるイラスト制作の基本操作|サイバーエージェントフリー素材と「すごい」Illustratorテクニックデザインをワンランク上げるイラストレーターのチュートリアル集10.Photoshopの使い方フォトショップを最初に扱うときにやっておきたい設定、イラレのように直接図形を選択できたり、ブラシで描いた時に端がぼやけないようにする方法など。質感の出し方、レトロ感の出し方も参考になります。クリエイティブメモメモPhotoshopで使える簡単テクまとめ。DesignPhotoshopの使い方と小技まとめ「Photoshop」マジック小技集2311.バナー作成Webデザイナーさんはビジュアル部分を担当するので、写真・ロゴ・ボタンなどをデザインすることが多いと思います。こちらはバナーデザインを効率よく進めるための制作プロセスや土台の作り方など。バナーを直接貼って解説してあるので分かりやすいですよ。倍速かつ高品質なバナーを作るためのコツを全公開します12.ボタン作成CSS3の登場によって画像を使わずにボタンを作る人が増えています。以下、CSS3のみでボタンを作成するための方法。NxWorldCSS3の勉強になるかも!?画像を使わないボタンの作成手順|Webpark5つの効果で作る、よく使うCSS3ボタンデザインサンプル集フロントエンドエンジニアフロントエンドエンジニアはデザインデータをブラウザでウェブページとして表示できるようコーディングを行います。デザイナーとプログラマーとの間を繋ぐイメージ。最近では設計の段階からプログラマーと担当範囲や仕様を相談してプロジェクトを進めるようになってきました。ちなみにフロントエンドとはユーザーから見た表側の画面のことで、ユーザーインターフェースを意味します。13.HTML5HTML5は従来に比べて記述がシンプルになったので、マークアップにかかる工数を減らせるというメリットがあります。style要素が条件付きでbody要素内に書けるようになったり、開始終了タグ、type属性の省略、新要素の追加など、ソースコードも読みやすく記述できます。タグはHTML5リファレンスで。今からハジメるHTML5マークアップ14.CSS3/SassCSS3で実装されたプロパティやセレクタを使うと、従来画像にしていたものをCSSだけで表示したり、無駄なHTML要素を減らしたりできます。速度に対するユーザーの要求も高くなってきてるので、読み込み速度や表示速度のテクニック、フロントエンドで解決できるデバックのスキルも身につけなければいけません。意外と知らない!?CSSセレクタ20個のおさらい|Webpark知っておくと速い!CSS3に関する「便利」なまとめ15.javascriptページに動き(計算結果、絵を動かしたり)を出したければJavaScript。コピー&ペーストだけで、動くものができてしまいます。筆者の会社ではデザイナーさんもプログラマーさんもJavaScriptに関して勉強している人が多いです。アプリ制作にも役立つので習得必須です。以下、JavaScriptやフロントエンドに関する記事。::ハブろぐ16.jQueryJavaScriptの命令を手軽な書き方で記述できるjQuery。CSSが分かるデザイナーやマークアップエンジニアが簡単に習得できるように設計されています。アニメーション効果(スライド、フェードイン、ツールチップなど)をつけたりできます。会員制サイトはXOOPSを使いますが、検索ナビサイトやコーポレイトサイトはワードプレスで構築します。SEOに有利なようにカスタマイズしたり、お客さん側の管理のしやすさからWordPressを使うことが多くなっています。プラグイン少なめでオリジナルテーマを作ると勉強になると思います。以下オリジナルテーマを作成する上で役立つサイトです。管理画面からサイトの配色を変えられる18.EC-CUBE筆者の会社はECサイト構築をする場合、EC-CUBEをカスタマイズします。通販サイト構築依頼は結構多いので習得しておきたいところです。php・サーバー関係・プラグイン開発はプログラマー、デザイン全般やSmartyはデザイナーさんといった感じで担当しています。EC-CUBEプラグインは競合が少ないので、今なら有料プラグイン開発だけで安定した収益源を確保することも可能です。日本発ECオープンプラットフォームイラストレータークライアントの要望に応じてキャラクターや挿絵・地図などのイラストを作成するイラストレーター。最近アバターやオリジナルキャラなどの需要が増えてきたので今後伸びそうです。Webデザイナーが兼務している場合が多いと思います。キャラクターの作り方など。pal-9999の日記フォトグラファーサイトのイメージや広告などに掲載する写真を撮影するフォトグラファー。カメラ・照明等・Photoshopなどの知識が必要です。SEOではコンテンツ(オリジナルの文章・写真・動画)なども重要な要素の一つになると思うので、余力があれば勉強したいですね。20.写真を撮る一眼レフの絞り・シャッタースピードから写真を上手に取るためのコツやテクニック、初心者必見のボリューム満載のまとめです。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2014/09/29Webデザイナーが捗る!知識を増やす最近のトレンドまとめWebデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみ2016/12/26404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。いうよりもユーザーは確実に離脱してしまうでしょう。目立たないページだからこそ2016/05/23ちょっと新しい見せ方、CSSなどで実現する今っぽいエフェクトまとめCSSで実現する今っぽく新しいエフェクトをまとめました。2016年のトレンドをおさえてピックアップ。膨大な量になってしまった。コメントデータの処理方法の詳細はこちらをご覧ください。