SlideShare a Scribd company logo
Webサイトの核をデザインするための最初の一歩
長谷川恭久
CSS Nite in SENDAI, Vol.7
2013年10月19日
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
制作者以外でもメイン画像が変更可能
写真ギャラリー
お問い合わせフォーム
自由に切り替え可能なカラーテーマ
ブログとの連携
レスポンシブWebデザイン
Webサイトの核をデザインするための最初の一歩
不動産に特化したカスタマイズ済
権限を分けてコンテンツ管理が可能
高解像度スクリーン対策
Google マップ との連携
Sass & Bootstrap
レスポンシブWebデザイン
Webサイトの核をデザインするための最初の一歩
個性のあるデザインは、あれば欲しいけど、
それより自分が出したい情報を
すぐに出せることのほうが重要。

あるヘアサロン店長
•

ただ制作するだけという立場の今後は不透明

•

凝ったビジュアルや最新技術は内輪向けの価値観

•

デザインは重要だが、その前にすることがある
Design

Trust

Brand

デザイン

信頼

ブランド
表現・配信・対話

Design

デザイン
価値の具体化・実践

Trust

信頼

大事にしている価値観

Brand

ブランド
Design

デザイン
価値の具体化・実践

Trust

Brand

信頼

ブランド
Webサイトの核をデザインするための最初の一歩
VS

Customer Service Hell, Time (2011)
Meaningful Brand Index (2013)

by Luke Ma
Meaningful Brand Index (2013)

by Luke Ma
•

製品・サービスのアピールだけでは、顧客はついてこない

•

売り物だけでは『差別化』になり難い

•

安売り・クーポンでは、顧客ロイヤリティに繋がりにくい

•

イメージ以外で、価値を伝える必要がある

Meaningful Brand Index (2013)

by Luke Ma
コンテンツはあるから、変換するだけだよね??
スマホサイトへの不満

見た目だけの『対応』
自己満足なコンテンツ
無駄なコンテンツ
不十分なコンテンツ
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Android Fragmentation Visualized (July 2013)
Android Fragmentation Visualized (July 2013)
5.7
5.5
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
価値あるコンテンツの設計
マルチデバイスを見据えた提案
持続可能な配信モデルの提案
上記が実現できるサイト設計
価値あるコンテンツの設計

コアになる価値の共有

マルチデバイスを見据えた提案

コンテンツの整備・CMSの設計

持続可能な配信モデルの提案

ワークフローとガイドライン作成

上記が実現できるサイト設計

利用者導線を考慮した設計
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
サイモン・シネック
WHYから始めよ!

― インスパイア型リーダーはここが違う

ゴールデン・サークル
Webサイトの核をデザインするための最初の一歩
何をするか。何を売るか。

どうやってするか。どう売るか。

なぜやっているか。なぜ存在しているか。
Webサイトの核をデザインするための最初の一歩
核
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
多機能で素晴らしい製品を販売しています

素敵なデザインでユーザーフレンドリーです

??????
そして素晴らしい製品ができあがりました

世界を変えるために美しいデザインが必要

我々がすることは世界を変えると信じている
Webサイトの核をデザインするための最初の一歩
ディズニーランドやメディアがあります

笑顔が生まれるコンテンツと場所が必要

人々を幸せにしたい
Webサイトの核をデザインするための最初の一歩
服・ギア・トラベルグッズがあります

デザインと素材にこだわった製品が必要

社会変革のための道具であり、模範でありたい
3M
Nike
Disney
Marriott
Merck
Mary Kay
Patagonia
Wal-Mart
Coca-Cola
IBM

未解決の問題を革新的な方法で解決
競技・勝利するときの感情を体験してもらう
人々を幸せにしたい
家を離れていても友と過ごす時のような気分を提供
人々の生活を改善し、守り続ける
女性に無限の可能性を提供する
社会変革のための道具であり模範でありたい
普通の人が裕福な人と同じ物が変える機会を提供
楽観的で幸せな時を提供する
企業にとって意味のある革新を
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
ビジョンを補助するコンテンツ

配信方法

最適な色や表現

写真の選び方
社会変革のための道具であり、模範でありたい
Webサイトの核をデザインするための最初の一歩
社会責任
環境助成金プログラム
デザインと素材
製品にまつわるストーリー
楽観的で幸せな時を提供したい
相性の良いレシピ紹介
ライフスタイル提案
シロクマ保護プログラム
製品にまつわるストーリー
言語化・視覚化が必要
個人のテイストでデザインが決まる
言葉の捉え方の違いによる誤解
コンテンツの軸が定まらない
流行に流され続ける
どうやってコンテンツの核を見つけ出すの?
クライアント、同僚、上司に尋ねる

キーワードを書き出す

短くて明確な言葉に落とし込む

価値を展開してコンテンツ案を練る
Good Core Principles
よい『核』はどういったものなの?
報酬がなかったとしても、やれることか

個人的に共感できるか

10年後も通用するかどうか
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
コンテンツ

ビジョン・核

ニーズ・タスク

利用者
今あるコンテンツの品質チェック
必要なコンテンツの洗い出し
利用者導線と画面遷移の設計
遷移とコンテンツのマッチング
ページ名
URL
制作日
更新日
担当者

ページビュー
離脱率
滞在時間
コンバージョン
画面内のコンテンツの細分化
各要素の課題の洗い出し
進行状況
Webサイトの核をデザインするための最初の一歩
Webサイト『制作』以上のことを考え始める
核を明確にすることでデザインしやすくなる
コンテンツには、たくさんの課題がある
真のビジネスパートナーとして
長谷川恭久
mail@yasuhisa.com
@yhassy
www.yasuhisa.com/could

More Related Content

What's hot

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
年末調整の情報設計
年末調整の情報設計年末調整の情報設計
年末調整の情報設計
力也 伊原
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
 
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
Kenta Nakamura
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Kenta Nakamura
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
 

What's hot (20)

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
年末調整の情報設計
年末調整の情報設計年末調整の情報設計
年末調整の情報設計
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
 
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 

Viewers also liked

コンテンツマーケティングの基礎と実践(前編)
コンテンツマーケティングの基礎と実践(前編)コンテンツマーケティングの基礎と実践(前編)
コンテンツマーケティングの基礎と実践(前編)
ナイル株式会社
 
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
Yasuhisa Hasegawa
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
Yasuhisa Hasegawa
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Yasuhisa Hasegawa
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
Yasuhisa Hasegawa
 
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナーWebサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
ナイル株式会社
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフロー
Yasuhisa Hasegawa
 
集客できる Webコンテンツの 設計方法とは
集客できる Webコンテンツの 設計方法とは集客できる Webコンテンツの 設計方法とは
集客できる Webコンテンツの 設計方法とは
ニフティ株式会社
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
 
Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤
Yusuke Wada
 
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
Mayuko Sekiya
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
Yasuhisa Hasegawa
 
Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料
Find Job Startup
 
20111117 msp説明資料
20111117 msp説明資料20111117 msp説明資料
20111117 msp説明資料
Akiyuki Minami
 
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料
Find Job Startup
 
Cyta.jp_サービスEC説明資料
Cyta.jp_サービスEC説明資料Cyta.jp_サービスEC説明資料
Cyta.jp_サービスEC説明資料
Find Job Startup
 
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
Find Job Startup
 
メルカリ_サービス説明資料
メルカリ_サービス説明資料メルカリ_サービス説明資料
メルカリ_サービス説明資料
Find Job Startup
 
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
Find Job Startup
 

Viewers also liked (19)

コンテンツマーケティングの基礎と実践(前編)
コンテンツマーケティングの基礎と実践(前編)コンテンツマーケティングの基礎と実践(前編)
コンテンツマーケティングの基礎と実践(前編)
 
作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
 
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナーWebサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
Webサイト運営者対象 ユーザーを「ファン化」するコンテンツ企画制作セミナー
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフロー
 
集客できる Webコンテンツの 設計方法とは
集客できる Webコンテンツの 設計方法とは集客できる Webコンテンツの 設計方法とは
集客できる Webコンテンツの 設計方法とは
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤
 
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
 
Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料Best Teacher_法人向けサービス説明資料
Best Teacher_法人向けサービス説明資料
 
20111117 msp説明資料
20111117 msp説明資料20111117 msp説明資料
20111117 msp説明資料
 
PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料PIXTA_シードラウンド用事業プラン説明資料
PIXTA_シードラウンド用事業プラン説明資料
 
Cyta.jp_サービスEC説明資料
Cyta.jp_サービスEC説明資料Cyta.jp_サービスEC説明資料
Cyta.jp_サービスEC説明資料
 
ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書ストリートアカデミー_ローンチ前企画書
ストリートアカデミー_ローンチ前企画書
 
メルカリ_サービス説明資料
メルカリ_サービス説明資料メルカリ_サービス説明資料
メルカリ_サービス説明資料
 
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
 

Similar to Webサイトの核をデザインするための最初の一歩

Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
 
NS study8 DDD Microservices Azuer Service Fabric
NS study8 DDD Microservices Azuer Service FabricNS study8 DDD Microservices Azuer Service Fabric
NS study8 DDD Microservices Azuer Service Fabric
貴志 上坂
 
ワイヤーフレームとは?
ワイヤーフレームとは?ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
 
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
力也 伊原
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
 
CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"
Takashi Sakamoto
 
実践!構造化マークアップ
実践!構造化マークアップ実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
 
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
力也 伊原
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
貴志 上坂
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
Takashi Sakamoto
 
自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合
Yukinori SAEKI
 

Similar to Webサイトの核をデザインするための最初の一歩 (20)

Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
 
NS study8 DDD Microservices Azuer Service Fabric
NS study8 DDD Microservices Azuer Service FabricNS study8 DDD Microservices Azuer Service Fabric
NS study8 DDD Microservices Azuer Service Fabric
 
ワイヤーフレームとは?
ワイヤーフレームとは?ワイヤーフレームとは?
ワイヤーフレームとは?
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
Sixapart day-2012-ideamans
Sixapart day-2012-ideamansSixapart day-2012-ideamans
Sixapart day-2012-ideamans
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
 
Web
WebWeb
Web
 
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
 
Front night vol1
Front night vol1Front night vol1
Front night vol1
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
 
Csspage1 2014-06-22
Csspage1 2014-06-22Csspage1 2014-06-22
Csspage1 2014-06-22
 
CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"
 
実践!構造化マークアップ
実践!構造化マークアップ実践!構造化マークアップ
実践!構造化マークアップ
 
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
 
自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合
 

More from Yasuhisa Hasegawa

あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
Yasuhisa Hasegawa
 
データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法
Yasuhisa Hasegawa
 
再入門ペーパープロトタイピング
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピング
Yasuhisa Hasegawa
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
Yasuhisa Hasegawa
 
デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ
Yasuhisa Hasegawa
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
Yasuhisa Hasegawa
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
Yasuhisa Hasegawa
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
Yasuhisa Hasegawa
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
Yasuhisa Hasegawa
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
Yasuhisa Hasegawa
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
Yasuhisa Hasegawa
 
ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
Yasuhisa Hasegawa
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
 
未来をプロトタイプしよう
未来をプロトタイプしよう未来をプロトタイプしよう
未来をプロトタイプしよう
Yasuhisa Hasegawa
 
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザインモダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
 
終わりなきWebの旅
終わりなきWebの旅終わりなきWebの旅
終わりなきWebの旅
Yasuhisa Hasegawa
 
脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術
Yasuhisa Hasegawa
 
プロトタイピングからはじめよう
プロトタイピングからはじめようプロトタイピングからはじめよう
プロトタイピングからはじめよう
Yasuhisa Hasegawa
 
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
 

More from Yasuhisa Hasegawa (20)

あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
 
データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法
 
再入門ペーパープロトタイピング
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピング
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
 
デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
 
ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
未来をプロトタイプしよう
未来をプロトタイプしよう未来をプロトタイプしよう
未来をプロトタイプしよう
 
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザインモダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
 
終わりなきWebの旅
終わりなきWebの旅終わりなきWebの旅
終わりなきWebの旅
 
脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術
 
プロトタイピングからはじめよう
プロトタイピングからはじめようプロトタイピングからはじめよう
プロトタイピングからはじめよう
 
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
 

Webサイトの核をデザインするための最初の一歩