センスゼロエンジニアが
ノンデザイナーズ・デザインブック
を読んでどこまでできるか試す
澤井 友恵
@tomoeine
自己紹介
名前:澤井友恵
趣味:クライミング
経歴
高校中退後(テーブルレイアウト全盛
期)、HP作成にハマる
大学入学、零細Web広告会社で1人システ
ム部門のバイト
卒業後、大手SIerにSEとして勤務
2016年に宮崎へ移住&転職(自社サービス
開発)
2018年6月にフリーランス化、山の中の平
屋で在宅ワーク中
 (最近)好きな技術:AWS、型、SPA
いきなり宣伝
サービス作りました!
yurusuke.com
このLTの対象者
● これからデザインを学ぼうとしている人
● デザインのことも知りたいエンジニアやマーケッ
ター
● 名刺のデザインぐらい自分でできたらなぁ・・・と
思っている人
● いつかゼロから自分のWebサービス作りたい人
ノンデザイナーズ・
デザインブック
ノンデザイナーズ・デザインブック
デザイナーでない人のための、デザインの定番基本書
※Web前提ではない
4つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる
4つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる
読む気しない!
4つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる
読む気しない!
→「4つの基本原則」
で直してみる
近接
関連する項目を近づ
けてグループ化する。
近接することで、1個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
4つの基本原則
4原則の意識で、デザインをコントロールできる
近接
関連する項目を近づ
けてグループ化する。
近接することで、1個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
4つの基本原則
4原則の意識で、デザインをコントロールできる
近接
見出しと説明文を
近づけ、
他の原則の間に
スペースを作った
近接
関連する項目を近づ
けてグループ化する。
近接することで、1個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
4つの基本原則
4原則の意識で、デザインをコントロールできる
整列
左でそろえた
近接
関連する項目を近づ
けてグループ化する。
近接することで、1個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
4つの基本原則
4原則の意識で、デザインをコントロールできる
反復
コントラスト
上下に青い帯をつけた
見出しは大きく、色をつけた
強調する部分を太字にした
フォントの使い分け
デザイン修正
やってみた
モデル
愛生会のHPを直してみよう!
※現在はリニューアル済です
※著作権関係でキャプチャ削除
http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/
にて当時のページを閲覧可能です
まず掃除から始めましょう
(P.92)
まず掃除から始めましょう
● 色を削る
● 以下を削除
- 院長の個人的なMicrosoftへの
クレーム
- 招き猫
- midi音源
近接
近接
● スタッフ紹介ページ、外部リン
クをグルーピングした
整列
整列
● 左ぞろえと右ぞろえのライン
を作った
反復・コントラスト
コントラスト&反復
● 上下に帯をつけ、
病院名にも同じ
色を使った
● 病院名のフォント
をメニューでも
使った
● 病院名を大きく目
立たせた
Before
※現在はリニューアル済です
※著作権関係でキャプチャ削除
http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/
にて当時のページを閲覧可能です
After
もう一度宣伝
「誘うほどじゃないけど、他にも誰か行くかな?」
というとき・・・
yurusuke.com
ご清聴ありがとうございました!
澤井 友恵
@tomoeine
センスゼロエンジニアが
ノンデザイナーズ・デザインブック
を読んでどこまでできるか試す

More Related Content

PDF
About Design Manager
PDF
新入生歓迎LT祭り2014
PDF
WebデザイナーによるWebデザイナーのためのマーケティング入門
PDF
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
PDF
私のWordPress勉強法
PDF
Adobe Illustratorによる WordPressテーマ作成ワークフロー
PDF
Director's Night 20130921
About Design Manager
新入生歓迎LT祭り2014
WebデザイナーによるWebデザイナーのためのマーケティング入門
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
私のWordPress勉強法
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Director's Night 20130921

What's hot (19)

PDF
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
PDF
「フォントはしゃべる」というお話
PPTX
第1回 IT講座 IT基礎知識
PDF
顧客や取引先を増やすためのブログ集客について
PDF
仲介手数料無料の不動産売買 プレゼンテーション資料
PDF
サービス業から学んだコミュニケーションのコツ
PDF
私をWordCampに巻き込んだ「しいたけ占い」
PDF
自分に合ったWeb出店とは? in まるたまサマースクール
KEY
Keynote 20120316
PDF
お客様のための管理画面カスタマイズ
PDF
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
PDF
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
PDF
Designer Meets Bootstrap(22th Knock!)
PDF
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
PDF
concrete5を使って分かった、WordPressのいいところ
PDF
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
PDF
MTDDC Meetup NAGOYA 2014_LT資料
PPTX
concrete5 CMS FES 2016(CMS夏祭り2016)
PDF
Webサービスを生む実践スタートアップ講座
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
「フォントはしゃべる」というお話
第1回 IT講座 IT基礎知識
顧客や取引先を増やすためのブログ集客について
仲介手数料無料の不動産売買 プレゼンテーション資料
サービス業から学んだコミュニケーションのコツ
私をWordCampに巻き込んだ「しいたけ占い」
自分に合ったWeb出店とは? in まるたまサマースクール
Keynote 20120316
お客様のための管理画面カスタマイズ
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Designer Meets Bootstrap(22th Knock!)
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
concrete5を使って分かった、WordPressのいいところ
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
MTDDC Meetup NAGOYA 2014_LT資料
concrete5 CMS FES 2016(CMS夏祭り2016)
Webサービスを生む実践スタートアップ講座
Ad

Similar to センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す (20)

PDF
伝わるスライドデザイン術
PPTX
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
PPTX
重要なのはリサーチ・プランニング・プロトタイプの三本柱
PDF
アプリ開発、SaaS開発を経て最近考えていること.pdf
PPTX
デザイナーが複業でデザイナーしてる話
PDF
20160308seminar2
PDF
福井で「しあわせデザイナー」になるために
PDF
Framerで動くモックアップを簡単作成
PDF
5分で伝えるAWS
PDF
groundwork-pasona-tech
PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
PDF
だから、Webディレクターはやめられない Z
PDF
失敗から学ぶUXへの取り組み
PDF
アプリ開発、SaaS開発を経て最近考えていること.pdf
PDF
ブランディングを意識したサービス開発の一歩
PDF
初めてのGIT超入門
PDF
Think User : UXデザインにおけるユーザー設計とは?
PPTX
エンジニアの移住交流会 自己紹介
PPTX
新規事業作って学んだ事_WCK_20190119発表
PDF
【MTDDCMeetupTokyo2018】制作会社・代理店・クライアント みんなが幸せ! 現場担当者のためのサイトリニューアル
伝わるスライドデザイン術
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
重要なのはリサーチ・プランニング・プロトタイプの三本柱
アプリ開発、SaaS開発を経て最近考えていること.pdf
デザイナーが複業でデザイナーしてる話
20160308seminar2
福井で「しあわせデザイナー」になるために
Framerで動くモックアップを簡単作成
5分で伝えるAWS
groundwork-pasona-tech
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
だから、Webディレクターはやめられない Z
失敗から学ぶUXへの取り組み
アプリ開発、SaaS開発を経て最近考えていること.pdf
ブランディングを意識したサービス開発の一歩
初めてのGIT超入門
Think User : UXデザインにおけるユーザー設計とは?
エンジニアの移住交流会 自己紹介
新規事業作って学んだ事_WCK_20190119発表
【MTDDCMeetupTokyo2018】制作会社・代理店・クライアント みんなが幸せ! 現場担当者のためのサイトリニューアル
Ad

More from Tomoe Sawai (16)

PDF
エンタープライズ SaaS の初期成長戦略
PDF
ユースケース駆動開発のワークショップやってみた!
PDF
Flexbox しか勝たん
PDF
フルリモートチームで スクラム開発 やってみた!
PDF
TypeScriptで辛麺を注文する(ライブコーディング)
PDF
SkyWay で ビデオチャットサービス を構築してみた!
PDF
初めての公開Gem作り
PDF
地方フリーランスとして ゆるいチームで生き抜いてる話
PDF
田舎暮らし流エンジニアスキルアップ術
PDF
在宅フリーランスで 失敗した話3選
PDF
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
PDF
Solidus + Stripe で爆速!?ECサイト構築
PDF
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
PDF
宮崎の山の中でリモートワークしてみた
PDF
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
PDF
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
エンタープライズ SaaS の初期成長戦略
ユースケース駆動開発のワークショップやってみた!
Flexbox しか勝たん
フルリモートチームで スクラム開発 やってみた!
TypeScriptで辛麺を注文する(ライブコーディング)
SkyWay で ビデオチャットサービス を構築してみた!
初めての公開Gem作り
地方フリーランスとして ゆるいチームで生き抜いてる話
田舎暮らし流エンジニアスキルアップ術
在宅フリーランスで 失敗した話3選
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Solidus + Stripe で爆速!?ECサイト構築
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
宮崎の山の中でリモートワークしてみた
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた

センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す