SlideShare a Scribd company logo
コーディングを考慮した
Webデザインガイドライン
2014/7/30
株式会社Plankton Design
牧下 浩之
牧下 浩之
クリエイティブディレクター/デザイナー
印刷媒体のデザイン事務所に4年勤務後、独立
Web媒体を中心にフリーランスとして約10年活動
2011年に株式会社Plankton Design設立
株式会社
Plankton
Design
代表取締役
Adobe
Pinch Inにて
記事連載中
東京造形大学
非常勤講師
デザイナー同士が
プレゼンテーション
を行うイベント
DePre!
主催
コーヒーの
焙煎と抽出
「コーディングを考慮したWebデザインガイドライン」
コーディング担当者が作業しやすいデザインカンプを作成するための
デザインおよびデザインデータ制作のガイドライン。
‣ デザインとコーディングを別々の担当者がおこなうことを想定。
‣ Photoshop CC 2014による制作を想定。
本セッションのねらい
1) Webデザインの作法に則る。
2) 意図が明確で、一貫性のあるデザインを作成する。
3) 他者が見てもわかりやすいデータを作成する。
コーディング作業で困らない
デザインとは?
1Webデザインの作法に則る
初期設定や、やってはいけないことの回避
カラーモードはRGBで
Webはモニタで再現されるため、カラーモードはRGBとなる。
CMYKや特色などの指定は不可。
スマートオブジェクトなども同様にRGBで。
寸法の単位はピクセルで
Photoshopの環境設定から、「定規」「文字」の単位に「pixel」を指定。
テキストのサイズは整数で指定
小数点以下の指定を反映することはできないため、整数値で指定する。
ブロック要素内で自動改行されるテキスト
を再現するために任意改行を入れない
ブロック要素に複数行のテキストを流し込んだ状態を作成する際は、
テキストボックスを作成してテキストを流し込む。
ポイントテキストは使用しない。
透過画像として書き出す必要のあるレイヤ
ーに特殊な描画モードを指定しない
ブラウザ上では描画モードは再現できない。
描画モード:焼き込みカラー
描画モード:通常
不当明度:60%
ピクセル未満のにじみを発生させない
主にシェイプレイヤーにおいて、1ピクセル未満のにじみが発生しないようにする。
Photoshopの環境設定から、「ベクトルツールと変形をピクセルグリッドにスナップ」
にチェックを入れる。
ピクセル未満のにじみを発生させない
Illustratorで作成したパスを貼り付けるなどして作成したシェイプレイヤーの
エッジがぼやけている場合は、「エッジを整列」にチェックを入れる。
パスは変化しないが見た目はくっきりとする。
別々の画像に切り出す要素を重ねない
特にドロップシャドウなど。
ドロップシャドウの場合、画像で再現するのかCSSで再現するのかをあらかじめ
決めておくとよい。
反復する画像はリピート可能なデザイン
にする
継ぎ目なく繰り返されるパターン画像を実現させたい場合は、長方形でパターン要素を
抜き出せるようにしておく。
2意図が明確で、
一貫性のあるデザインを作成する
サイトのデザインルールを作成し、活用する
デザインルール
位置
x位置やy位置。レイアウトに関すること。
位置
レイアウトをおこなう際の最低単位=因数を決定する
あらかじめレイアウトの因数を決めておき、
その因数の整数倍の値を使ってベースレイアウトや要素間のマージンを決定する。
私の場合、4、5、6を因数とすることが多い。
因数
5
因数
4
因数
6
位置
レイアウトグリッド
レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。
これらもレイアウト上の因数を持っている。
940グリッドシステム:12カラム(1カラム=60px、マージン=20px)
60px
20px
因数
4
位置
レイアウトグリッド
レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。
これらもレイアウト上の因数を持っている。
950グリッドシステム:12カラム(1カラム=70px、マージン=10px)
70px
10px
因数
5
位置
レイアウトグリッド
レイアウトの基準になるグリッドシステムのうち、いくつかの例を紹介。
これらもレイアウト上の因数を持っている。
978グリッドシステム:12カラム(1カラム=54px、マージン=30px)
54px
30px
因数
6
‣ レスポンシブデザインでは、厳密なピクセル指定よりも比率が重要になってくるが、ベース
となるデザインを考案するに際には、グリッドシステムの考え方はそのまま活用できる。
位置
マージン
レイアウトグリッドよりも細かい単位で、さまざまな要素をレイアウトする際に使用するマー
ジンも、因数を使用してバリエーションを用意しておく。
ex)
因数が4の場合:4、8、16、32、48、64
因数が5の場合:5、10、20、40、60、80
因数が6の場合:6、12、24、48、72、96
規準を活かしてレイアウトする。
ガイドラインを引く
レイアウトグリッドにしたがって、ガイドラインを引いておく。
位置
レイヤーをレイアウトする
Photoshop CC 2014よりスマートガイドが強化された。
レイヤーやレイヤーグループをフリーハンドでレイアウトする際に活用できる。
位置
スマートガイド
レイヤーやパスの移動距離
レイヤーをドラッグすると、レイヤーの元
の位置からの距離を表す参考測定ガイドが
表示される。パスの場合も同様。
水平・垂直・中心が他のオブジェクトに揃
っている場合、ガイドが表示される。
‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。
位置
スマートガイド
移動中の複製レイヤーと元のレイヤーとの距離
Optionキーを押しながらレイヤーをドラッグ
し、レイヤーを複製しつつ移動する際、
元のレイヤーと複製レイヤー間の距離を表す
参考測定ガイドが表示される。
‣ 移動ツール・パスコンポーネント選択ツール・パス選択ツール使用時に有効。
位置
スマートガイド
レイヤーとキャンバスとの位置関係
任意のレイヤーを選択した状態で、
Cmdキーを押したまま
図形の外部にマウスオーバーすると、
キャンバスからの距離が表示される。
‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。
位置
スマートガイド
レイヤーと別レイヤーとの位置関係
任意のレイヤーを選択した状態で、
Cmdキーを押したまま
別のレイヤーにマウスオーバーすると、
そのレイヤーとの距離が表示される。
‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。
位置
スマートガイド
一致スペース
配置された2つのレイヤーのうち1つの
レイヤーを、Option+ドラッグで複製
しながら3つめのレイヤーを配置しよう
とすると、選択中のレイヤーとそのレイヤーに隣接するレイヤーの間隔が
すでに配置されているレイヤーと等間隔になった際に測定ガイドが表示される。
‣ 移動ツール・パスコンポーネント選択ツール使用時に有効。
位置
デザインルール
色
描画色や背景色、シェイプの塗りや線、
テキストカラー、レイヤースタイルで使用する色など。
反復して使用する色はスウォッチで管理
色を選ぶ際はスウォッチから選択するようにする。
名前を付ける
無難な命名は色成分。ex)003366
使用範囲が限定されている場合は、その範囲を付記する。ex)planA_003366
順番に並べる
プリセットマネージャーを使用して、色相順や用途順など、活用しやすい順番に並べておく。
‣ プリセットマネージャー
スウォッチやグラデーション、レイヤースタイルなどのプリセットの管理ができる。
名前変更、順番変更、削除、読み込みや書き出しが可能。
色
スウォッチファイルの活用
スウォッチは外部ファイルとしての書き出しや読み込みができる。
aseファイル形式であれば、 PhotoshopやIllustrator(およびInDesign)で、
色見本の読み込み・書き出しが可能。
これを利用すれば、スウォッチの共有を図ることができる。
案件ごとに色見本を外部ファイル化しておけば、複数案件の対応やチームでの共有、
運用や修正対応にも便利。
‣ aco
Photoshop専用の色見本ファイルフォーマット。
‣ ase
色見本交換用のファイルフォーマット。Adobe Swatch Exchange。
色
デザインルール
ディティール
レイヤーそのものが持っている形と、
レイヤースタイルなどのアピアランス。
レイヤーそのものが持っている形
形を持つレイヤーには、
ビットマップレイヤー、シェイプレイヤー、
テキストレイヤーがある。
プリミティブな形状はシェイプレイヤーで
長方形や楕円形などの形状はシェイプレイヤーで作成すると
あつかいやすい。ライブシェイプ機能を活用すれば、
位置やサイズ、角丸などを編集できる。
ディティール
レイヤースタイル
グラデーションやドロップシャドウなどはレイヤースタイルで実現させる。
再編集可能であることや、コピー&ペーストできるなど汎用性が高い。
反復して使用するスタイルはスタイルパネルに登録
スウォッチと同様、スタイルパネルに登録しておけば、
すぐに呼び出すことができる。
外部ファイル化することもできる。
ディティール
デザインルール
テキスト
フォント、文字サイズ、行送りなど
反復して使用する文字設定・段落設定は
文字スタイル・段落スタイルパネルに登録
段落スタイルに文字サイズと行間、文字スタイルにフォントを登録して使用すると、
テキストの属性を吟味する際に便利。
文字スタイルや段落スタイル単独で外部ファイル化することはできないが、
他のpsdファイルの文字スタイルや段落スタイルを読み込むことは可能。
テキスト
デザインルール
エレメント
汎用的な要素
見出し、アイコン、ボタンなど
反復して使用するエレメントをエレメントファイルにまとめる
見出しや箇条書き、テーブル、アイコン、ボタン、フォームなど
繰り返し使用するエレメントをまとめておく。
エレメントは適宜画像アセットとして書き出し、各ページのデザインで使用する。
エレメント
リ
ン
ク
を
配
置
画
像
ア
セ
ッ
ト
を
生
成
3他者が見ても
わかりやすいデータを作成する
データやデータ内部を構造化する
‣ Adobe Pinch In「デザインをスムーズにするガイドライン」第1回参照
http://www.adobe.com/jp/jos/pinchin/article/design-and-guideline/ideas-for-smooth-production.html
1名前を付ける
2順番に並べる
3グルーピングする
基本的なガイドライン
レイヤーを統合せず、編集可能な状態で残しておく。
レイヤーには名前を付ける
レイヤーグループには構造・要素名
レイヤーには部位名(テキストレイヤーを除く)
レイヤーを順番に並べる
奧、上、左にレイアウトされているレイヤーから順に。
レイヤーをグルーピングする
HTML構造に沿ったレイヤーグループ構造に。
不要なレイヤーを削除
空白レイヤー・非表示レイヤー
解析しやすいデータにする
ヘッダやフッタなど、複数のページで使用する共通モジュールは、
外部ファイル化しておき、各ページにはリンクを配置している状態にする。
ナビゲーションのカレント状態をリンクされたスマートオブジェクト内の
レイヤーカンプで実現する。
共通モジュールの外部ファイル化
header.psb
スマートオブジェクトに変換
リンクされたアイテムに変換
レイヤーカンプ:通常時(_up)
レイヤーカンプ:menu1カレント時(_menu1_current)
属性パネルでレイヤーカンプの切り替えが可能
1) Webデザインの作法に則る。
2) 意図が明確で、一貫性のあるデザインを作成する。
3) 他者が見てもわかりやすいデータを作成する。
「コーディングを考慮したWebデザインガイドライン」
☺
ご清聴ありがとうございました!

More Related Content

What's hot

ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
 
プロダクトづくりのためのソフトウェア設計スタイル
プロダクトづくりのためのソフトウェア設計スタイルプロダクトづくりのためのソフトウェア設計スタイル
プロダクトづくりのためのソフトウェア設計スタイル
増田 亨
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
Michiyo Fukada
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
 
セールスアニマルになろう スタートアップ初期の営業戦略
セールスアニマルになろう スタートアップ初期の営業戦略セールスアニマルになろう スタートアップ初期の営業戦略
セールスアニマルになろう スタートアップ初期の営業戦略
Takaaki Umada
 
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
Yoshiki Hayama
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716Dai Murata
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
 
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うなワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
 
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
Yoshiki Hayama
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
Roy Kim
 
いいデザインと悪いデザイン
いいデザインと悪いデザインいいデザインと悪いデザイン
いいデザインと悪いデザイン
Takahashi Koki
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
Kazuyoshi Goto
 
xOps: エンジニアがスタートアップの成長の原動力となる日
xOps: エンジニアがスタートアップの成長の原動力となる日xOps: エンジニアがスタートアップの成長の原動力となる日
xOps: エンジニアがスタートアップの成長の原動力となる日
Takaaki Umada
 

What's hot (20)

ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
プロダクトづくりのためのソフトウェア設計スタイル
プロダクトづくりのためのソフトウェア設計スタイルプロダクトづくりのためのソフトウェア設計スタイル
プロダクトづくりのためのソフトウェア設計スタイル
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
 
セールスアニマルになろう スタートアップ初期の営業戦略
セールスアニマルになろう スタートアップ初期の営業戦略セールスアニマルになろう スタートアップ初期の営業戦略
セールスアニマルになろう スタートアップ初期の営業戦略
 
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うなワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
 
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
妻との相性をWatsonで分析してみた:東京都中小企業診断士協会中央支部 AI・人工知能研究会「AIの実態に迫る」
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
いいデザインと悪いデザイン
いいデザインと悪いデザインいいデザインと悪いデザイン
いいデザインと悪いデザイン
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
 
xOps: エンジニアがスタートアップの成長の原動力となる日
xOps: エンジニアがスタートアップの成長の原動力となる日xOps: エンジニアがスタートアップの成長の原動力となる日
xOps: エンジニアがスタートアップの成長の原動力となる日
 

Viewers also liked

イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
 
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
Yuki Ishikawa
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
玄 中野
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
 
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットするCAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Yahoo!デベロッパーネットワーク
 
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマデザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
 
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
swwwitch inc.
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
 
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィいますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィShinichiro Yabu
 
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなしいますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
Shinichiro Yabu
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
 

Viewers also liked (20)

イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
 
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットするCAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
 
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマデザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
 
いますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィいますぐ使えるタイポグラフィ
いますぐ使えるタイポグラフィ
 
いますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなしいますぐ使えるタイポグラフィ2〜書体のはなし
いますぐ使えるタイポグラフィ2〜書体のはなし
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
 

Similar to コーディングを考慮したWebデザインガイドライン

モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハモバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦sogawaminoru
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン 20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
信孝 柿沼
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
Yusuke Kojima
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
 
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへAdobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
 
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
kenji goto
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法Hiroyuki Ogawa
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
LocoPartners
 
サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計
LIG inc.
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
 
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しようMasayuki Abe
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 

Similar to コーディングを考慮したWebデザインガイドライン (20)

モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハモバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン 20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
 
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへAdobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
 
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
 
サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
 
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 

コーディングを考慮したWebデザインガイドライン