calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ

Designers_Slide

デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。

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

Sponsored Link

もくじ

サイト設計／構成

デザイン基本設計

バージョン管理

コーディング

CMS組み込み

＋アプリ開発

動作検証・試験

＋インフラ

納品

Ｗｅｂマスター

サイト設計／構成

１．要件定義

0からのウェブディレクション講座：設計編 from Yasuji Takase

ディレクションの一つであるヒアリングからの要件定義、戦略面の設計（情報設計）、ナビゲーションの構成（仕様設計）など。RWD（レスポンシブ・ウェブ・デザイン）での提案方法。

２．企画提案

ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識 from Tsutomu Sogitani

ディレクターだけじゃなくて、デザイナーさんも企画提案する場合があるので一応。提案内容の理解を促進させたり、イメージを向上させるハウツー。

３．情報設計・仕様書

マークアップエンジニアと情報アーキテクチャ from Rikiya Ihara

利用者が情報を探しやすいようにするための情報＋画面設計。他はクライアントや制作側が確認する仕様書。後は実装機能・言語・サーバー情報・ポリシー・納品形式などを決めます。

４．使いやすさの設計

エンジニアのためのUX入門 from Kazuyuki CHINDA

インターフェイスデザインあれこれ。UI・UX・IAやデザインに関して広く浅く解説。

デザイン基本設計

デザイナーはアートディレクターの指示に従い、コンセプトを的確に捉え具体的なデザインに落としこんでいきます。

５．基本原則＋設計

Webデザインのセオリーを学ぼう from Toshiaki Sasaki

実制作に入る前に基本原則をおさらい。近接（グループ化）、整列（意図的に整列・配置）、反復（特徴を繰り返す）、コントラスト（はっきりした違い）がよくわかるスライド。

６．書体や素材の選び方

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう from Sasaki Kouhei

以下のスライドはコントラスト・書体の選び方・ロゴ・素材の選び方などの基本的なことを学べます。もう一つはセンス云々の前にグリッドシステム・ホワイトスペース・アプローチをおさえましょうという話。

７．配色＋色彩設定

ノンデザイナーのための配色理論 from tsukasa obara

提案内容を理解したら、トンマナ（サイトの雰囲気を合わせる）を崩さず、配色を計画し色を効果的に用いて制作を進めます。要件を理解しトーン・キーカラー配分・余白配分などを決める必要があります。

８．フォント設計

「Webデザイナーのためのタイポグラフィと文字組版」 from swwwitch, inc.

文字に関するデザイン表現では、可読性や見やすさを確保しなければいけません。デザイナーは書体・サイズ・文字間・行間・ページ幅などをサイトやターゲットに合わせて組み合わせます。以下はタイプフェイスや組版の基礎知識。

９．フラットデザイン

流行に乗っていいの？フラットデザインの落とし穴 from Yuudai Tachibana

質感や立体感のない平面的なフラットデザイン。こちらは装飾を削るデザインではなく、 フラットな状態から要素を付け足すという考え方。感覚的な伝わりにくさを感じたらアイコンや写真で補います。

１０．デザインカンプ

Illustratorのカンプとうまく付き合う方法 from Takuya Nishitani

商用サイトの制作では詳細画面デザインが用意されている必要があります。クライアントさんに伝えるときにも必要です。カンプから画像や背景画像を書き出すのかCSSで表示させるか決め、エリア分けなど全体構造をマークアップ、その後テキスト原稿などのコンテンツ部分をマークアップします。

１１．画像パーツ作成

Photoshopで効率よくデザインしよう！ from Marie Suenaga

商品データに関してはクライアントさんから画像データや印刷資料などが提供されることもあります。ロゴ・ボタン・アイコン・背景などの画像はCSSで表現しない場合はデザインカンプから書き出します。

バージョン管理

１２．Git

デザイナのためのGit入門 from dsuke Takaoka

遅いくらいですけど、やっとこさ筆者の会社でも導入したので。

コーディング

かつてはデザインとコーディングだけでページは成り立っていましたが、JavaScript・CMS連携など多彩な技術が要求されるようになりました。

１３．HTML5

HTML5時代のWebデザイン from Masaaki Komori

デザインカンプをもとにエディタでHTMLを制作します。エリア分けをイメージしたあと、エリアごとにマークアップ。画像を書きだしたら、メタやコンテンツを適切に書いていきます。

以下はHTML５で拡張されたタグをちゃんと使って、多くの情報を伝えることができるように、意味付けを明確にするために見ておきたいスライド。

１４．CSS/Sass

ちゃんとCSSを書くために - CSS/Sass設計の話 from 拓樹 谷

リセットスタイルを指定したら、共通スタイル（ヘッダー・フッター・ナビなど）、IE対策、メディアクエリ指定の流れを把握します。こちらは再利用・保守しやすいように見ておきたいこと。

１５．レスポンシブ

レスポンシブ・ウェブデザイン基礎 from Masaaki Komori

CSSメディアクエリを利用し、デバイス画面解像度・向きによって適したビジュアルを定義します。コンテンツを分散させずに済むのでメンテナンス性が高くなります。ブレークポイントは768pxで線引するのが一般的。

１６．jQuery

⑯jQueryをおぼえよう！その２ from Nishida Kansuke

複雑な処理やエフェクトを簡単な記述で実行できクロスブラウザ対応であるjQuery。以下は基本的なことからプラグイン作成方法まで。

１７．javascript

最強オブジェクト指向言語 JavaScript 再入門！ from Yuji Nojima

JavaScript でオブジェクト指向プログラミングを行う際に知っておきたい基礎知識や概念。他は記述方法、関数の命名規則など盛りだくさんです。

CMS組み込み

１８．WordPress＋レスポンシブ＋フラットデザイン

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう from Junko Nukaga

親から継承した子テーマでWordPress構築していく簡単な実装方法。筆者は静的ページを作ってテストした後に、WPテーマ化していく方法をとるのですが、こちらのスライドはレスポンシブやCSSの基礎知識も盛り込んであるので見ておきたいですね。

１９．WordPress＋ポートフォリオ

WordPressで作るポートフォリオサイト from Takuma Nishiyama

WordPressを使ってポートフォリオサイトを制作する場合の制作フロー。

２０．高速化

WordPress を使いこなそう from Wataru OKAMOTO

プラグイン、画像ファイル、CSS読み込みなどによる速度の問題をどう解決していくか。

２１．WP カスタムフィールド

WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する from Takashi Uemura

標準で対応しきれない機能を補うカスタム系機能を理解するために。すべての記事に決まった入力欄を追加したいときやデータを利用・整頓するときにも必要です。

２２．WP プラグイン作成

WordPressプラグイン作成入門 from Yuji Nojima

デフォルトにはないクライアントのニーズをプラグイン作成という形で対応したり、別のクライアントさんで同じような要望があるときもあるので覚えておいて損はありません。

２３．EC-CUBE プラグイン作成

EC-CUBEプラグイン講義 from ria1201

筆者の会社では販売後のプラグイン問い合わせが１日10件ほどありますが、ECサイト構築よりも有料プラグイン販売のほうが安定収益源になるし、効率的なんじゃないかと思いはじめてます。サイト構築に比べて競合も少ないので、販売数を増やしていけば自社の強みとして売り出せるんじゃないでしょうか。

＋アプリ開発

２４．アプリ製作

スマホデザインパターン なう from Noriyuki Suzuki

スマホデザインに関するメリットやアプリ開発について。ウェブサイトをアプリ化してくれという要望もあるので。

動作検証・試験

２５．ブラウザ

最近のブラウザ状況 from yoshikawa_t

近況のブラウザシェア、特徴など。モバイル版もあります。

＋システム

２６．サーバー

サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべて from Masahito Zembutsu

クライアントさんにはバックアップをどうするか、データセンター管理、監視サービスが利用可能か明確にします。以下はサーバ運用における品質向上のための監視方法改善策について。

２７．MySQL、アパッチ

初心者向けMySQLの始め方 from Masahiro Tomita

MySQLのインストールや設定等の初心者向けの説明。公開前に抑えておきたいApacheセキュリティ対策+PHPの基本設定。

２８．Amazon Web Services

いまさら聞けないAWSクラウド - Java Festa 2013 from 玉川憲 (Ken Tamagawa) - Amazon Web Services

Amazon Web Services主要サービスの課金体系まとめ。利用料の一般的な内訳など。

２９．DNS設定

DNS再入門 from Takashi Takizawa

DNSはドメインとIPアドレスを相互変換し人間とコンピュータの仲立ちするシステム。こちらはDNSの基本がよく分かる資料です。

３０．SSL導入

エンジニアが知っておくべきSSL/TLSの知識(仮) from Masahiro Nakayama

サーバーとユーザー間の通信を暗号化する機能であるSSL。クライアントさんとのヒアリングで必ずといってよいほど出てくる用語なので把握。

納品

３１．htaccess 処理

.htaccessによるリダイレクト徹底解説 from Masahiko Kawai

本番環境とは別にテスト環境を用意します。テスト環境に不特定多数の人がアクセスしなければならない場合、IPアドレスやベーシック認証でアクセス制限をかけて安全性を高めます。

Webマスター

３２．コンテンツ

コンテンツ作りの三原則 from INFOBAHN.inc（株式会社インフォバーン）

テキストがコンテンツの中心となるサイトではライティング技術が求められます。クライアントさんが準備できない場合は自社で用意するときもあります。

３３．コピーライティング

カヤックコピー部のコピー講座 from コピーライター長谷川 哲士

ネーミングやキャッチコピーについて。ライティングでは奇抜なものより「誰にでも伝わること」が大切。

３４．解析レポート送付

脱・初心者！Googleアナリティクス勉強会 2013/09/14 from Nanae Hibino

解析データの分析をしてマーケティングの問題点を洗いだしたら改善策の実施に移ります。

３５．SEO

SEOに効くコンテンツの作り方 ver1.1 from INFOBAHN.inc（株式会社インフォバーン）

内部施策と外部施策、アップデートのわかりやすい解説。

３６．ランディングページ

LPデザインに関して〜作成のセオリーとコツ〜 from Noriko Matsumoto

ランディングページの基本的な構成や注意点。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

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