Upload
Download free for 30 days
Login
Submit search
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
2 likes
423 views
Tomoe Sawai
3/29開催「Webナイト宮崎 Vol.3 ~てげデザイン学びたい~」のLT資料です。 愛○会HP等をモデルに、ノンデザイナーズ・デザインブックを読んでどこまでできるか、やってみました!
Design
Read more
1 of 30
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
More Related Content
PDF
About Design Manager
Marino Yokoi
PDF
新入生歓迎LT祭り2014
Azusa Uezu
PDF
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
PDF
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
PDF
私のWordPress勉強法
Kazuyuki Takano
PDF
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Cherry Pie Web
PDF
Director's Night 20130921
Yasufumi Nishiyama
About Design Manager
Marino Yokoi
新入生歓迎LT祭り2014
Azusa Uezu
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
私のWordPress勉強法
Kazuyuki Takano
Adobe Illustratorによる WordPressテーマ作成ワークフロー
Cherry Pie Web
Director's Night 20130921
Yasufumi Nishiyama
What's hot
(19)
PDF
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
PDF
「フォントはしゃべる」というお話
Cherry Pie Web
PPTX
第1回 IT講座 IT基礎知識
Shunya Komori
PDF
顧客や取引先を増やすためのブログ集客について
Go Imai
PDF
仲介手数料無料の不動産売買 プレゼンテーション資料
Mori Taiki
PDF
サービス業から学んだコミュニケーションのコツ
Yumi Masaki
PDF
私をWordCampに巻き込んだ「しいたけ占い」
Masahiko Kawai
PDF
自分に合ったWeb出店とは? in まるたまサマースクール
Rikiya Suzuki
KEY
Keynote 20120316
Rikimaru Tomohiro
PDF
お客様のための管理画面カスタマイズ
Cherry Pie Web
PDF
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
PDF
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
PDF
Designer Meets Bootstrap(22th Knock!)
Yasuhito Yabe
PDF
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
LIQUID DESIGN Ltd.
PDF
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
PDF
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
PDF
MTDDC Meetup NAGOYA 2014_LT資料
Yasufumi Nishiyama
PPTX
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
PDF
Webサービスを生む実践スタートアップ講座
本間 和城
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
「フォントはしゃべる」というお話
Cherry Pie Web
第1回 IT講座 IT基礎知識
Shunya Komori
顧客や取引先を増やすためのブログ集客について
Go Imai
仲介手数料無料の不動産売買 プレゼンテーション資料
Mori Taiki
サービス業から学んだコミュニケーションのコツ
Yumi Masaki
私をWordCampに巻き込んだ「しいたけ占い」
Masahiko Kawai
自分に合ったWeb出店とは? in まるたまサマースクール
Rikiya Suzuki
Keynote 20120316
Rikimaru Tomohiro
お客様のための管理画面カスタマイズ
Cherry Pie Web
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
Designer Meets Bootstrap(22th Knock!)
Yasuhito Yabe
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
LIQUID DESIGN Ltd.
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
MTDDC Meetup NAGOYA 2014_LT資料
Yasufumi Nishiyama
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
Webサービスを生む実践スタートアップ講座
本間 和城
Ad
Similar to センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
(20)
PDF
伝わるスライドデザイン術
Concent, Inc.
PPTX
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
Kunihiro Okamura
PPTX
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
PDF
アプリ開発、SaaS開発を経て最近考えていること.pdf
ivanov23
PPTX
デザイナーが複業でデザイナーしてる話
Yuya Toida
PDF
20160308seminar2
アシアル株式会社
PDF
福井で「しあわせデザイナー」になるために
Miho Yamamori
PDF
Framerで動くモックアップを簡単作成
masaaki komori
PDF
5分で伝えるAWS
Tomoe Sawai
PDF
groundwork-pasona-tech
masaaki komori
PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
PDF
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
PDF
失敗から学ぶUXへの取り組み
Daichi Ono
PDF
アプリ開発、SaaS開発を経て最近考えていること.pdf
ivanov23
PDF
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
PDF
初めてのGIT超入門
Tomoya Koyanagi
PDF
Think User : UXデザインにおけるユーザー設計とは?
Kazumi Miyamura
PPTX
エンジニアの移住交流会 自己紹介
Rie Tokumi
PPTX
新規事業作って学んだ事_WCK_20190119発表
Hiromi Kobayashi
PDF
【MTDDCMeetupTokyo2018】制作会社・代理店・クライアント みんなが幸せ! 現場担当者のためのサイトリニューアル
digitalitalentity
伝わるスライドデザイン術
Concent, Inc.
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
Kunihiro Okamura
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
アプリ開発、SaaS開発を経て最近考えていること.pdf
ivanov23
デザイナーが複業でデザイナーしてる話
Yuya Toida
20160308seminar2
アシアル株式会社
福井で「しあわせデザイナー」になるために
Miho Yamamori
Framerで動くモックアップを簡単作成
masaaki komori
5分で伝えるAWS
Tomoe Sawai
groundwork-pasona-tech
masaaki komori
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
失敗から学ぶUXへの取り組み
Daichi Ono
アプリ開発、SaaS開発を経て最近考えていること.pdf
ivanov23
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
初めてのGIT超入門
Tomoya Koyanagi
Think User : UXデザインにおけるユーザー設計とは?
Kazumi Miyamura
エンジニアの移住交流会 自己紹介
Rie Tokumi
新規事業作って学んだ事_WCK_20190119発表
Hiromi Kobayashi
【MTDDCMeetupTokyo2018】制作会社・代理店・クライアント みんなが幸せ! 現場担当者のためのサイトリニューアル
digitalitalentity
Ad
More from Tomoe Sawai
(16)
PDF
エンタープライズ SaaS の初期成長戦略
Tomoe Sawai
PDF
ユースケース駆動開発のワークショップやってみた!
Tomoe Sawai
PDF
Flexbox しか勝たん
Tomoe Sawai
PDF
フルリモートチームで スクラム開発 やってみた!
Tomoe Sawai
PDF
TypeScriptで辛麺を注文する(ライブコーディング)
Tomoe Sawai
PDF
SkyWay で ビデオチャットサービス を構築してみた!
Tomoe Sawai
PDF
初めての公開Gem作り
Tomoe Sawai
PDF
地方フリーランスとして ゆるいチームで生き抜いてる話
Tomoe Sawai
PDF
田舎暮らし流エンジニアスキルアップ術
Tomoe Sawai
PDF
在宅フリーランスで 失敗した話3選
Tomoe Sawai
PDF
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Tomoe Sawai
PDF
Solidus + Stripe で爆速!?ECサイト構築
Tomoe Sawai
PDF
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
Tomoe Sawai
PDF
宮崎の山の中でリモートワークしてみた
Tomoe Sawai
PDF
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
PDF
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
Tomoe Sawai
エンタープライズ SaaS の初期成長戦略
Tomoe Sawai
ユースケース駆動開発のワークショップやってみた!
Tomoe Sawai
Flexbox しか勝たん
Tomoe Sawai
フルリモートチームで スクラム開発 やってみた!
Tomoe Sawai
TypeScriptで辛麺を注文する(ライブコーディング)
Tomoe Sawai
SkyWay で ビデオチャットサービス を構築してみた!
Tomoe Sawai
初めての公開Gem作り
Tomoe Sawai
地方フリーランスとして ゆるいチームで生き抜いてる話
Tomoe Sawai
田舎暮らし流エンジニアスキルアップ術
Tomoe Sawai
在宅フリーランスで 失敗した話3選
Tomoe Sawai
Stripe Connect with Subscriptions で サブスクプラットフォーマー になろう
Tomoe Sawai
Solidus + Stripe で爆速!?ECサイト構築
Tomoe Sawai
宮崎移住して山の中でリモートワークしてみた(2019/6/26)
Tomoe Sawai
宮崎の山の中でリモートワークしてみた
Tomoe Sawai
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
プラットフォームビジネスを手軽に始める!Stripe Connectを使ってみた
Tomoe Sawai
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
1.
センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す 澤井 友恵 @tomoeine
2.
自己紹介 名前:澤井友恵 趣味:クライミング 経歴 高校中退後(テーブルレイアウト全盛 期)、HP作成にハマる 大学入学、零細Web広告会社で1人システ ム部門のバイト 卒業後、大手SIerにSEとして勤務 2016年に宮崎へ移住&転職(自社サービス 開発) 2018年6月にフリーランス化、山の中の平 屋で在宅ワーク中 (最近)好きな技術:AWS、型、SPA
3.
いきなり宣伝
4.
サービス作りました! yurusuke.com
5.
このLTの対象者 ● これからデザインを学ぼうとしている人 ● デザインのことも知りたいエンジニアやマーケッ ター ●
名刺のデザインぐらい自分でできたらなぁ・・・と 思っている人 ● いつかゼロから自分のWebサービス作りたい人
6.
ノンデザイナーズ・ デザインブック
7.
ノンデザイナーズ・デザインブック デザイナーでない人のための、デザインの定番基本書 ※Web前提ではない
8.
4つの基本原則 近接 関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。 近接のためには空白も重要。 整列 「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明 確に意図的な場合は強い印象を与える。 反復 ○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。 コントラスト ○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の 組織化にも役立つ。 4原則の意識で、デザインをコントロールできる
9.
4つの基本原則 近接 関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。 近接のためには空白も重要。 整列 「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明 確に意図的な場合は強い印象を与える。 反復 ○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。 コントラスト ○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の 組織化にも役立つ。 4原則の意識で、デザインをコントロールできる 読む気しない!
10.
4つの基本原則 近接 関連する項目を近づけてグループ化する。近接することで、1個の視覚的ユニットとして認識される。 近接のためには空白も重要。 整列 「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明 確に意図的な場合は強い印象を与える。 反復 ○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。 コントラスト ○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の 組織化にも役立つ。 4原則の意識で、デザインをコントロールできる 読む気しない! →「4つの基本原則」 で直してみる
11.
近接 関連する項目を近づ けてグループ化する。 近接することで、1個 の視覚的ユニットとし て認識される。近接の ためには空白も重要。 整列 「右ぞろえ」「左ぞろ え」が洗練された印象 のデザインを産む。中 央ぞろえは退屈な印 象になるが、明確に意 図的な場合は強い印 象を与える。 反復 デザイン上の特徴を を作品全体を通して 繰り返す。反復させる 要素は色、フォント、 線の太さ、テクス チャー、等。反復は作 品の一貫性を生み、 情報の組織化にも役 立つ。 コントラスト 同一でない要素は はっきり異ならせる。 コントラストによって見 る人の目を引き込むと ともに、情報の組織化 にも役立つ。 4つの基本原則 4原則の意識で、デザインをコントロールできる
12.
近接 関連する項目を近づ けてグループ化する。 近接することで、1個 の視覚的ユニットとし て認識される。近接の ためには空白も重要。 整列 「右ぞろえ」「左ぞろ え」が洗練された印象 のデザインを産む。中 央ぞろえは退屈な印 象になるが、明確に意 図的な場合は強い印 象を与える。 反復 デザイン上の特徴を を作品全体を通して 繰り返す。反復させる 要素は色、フォント、 線の太さ、テクス チャー、等。反復は作 品の一貫性を生み、 情報の組織化にも役 立つ。 コントラスト 同一でない要素は はっきり異ならせる。 コントラストによって見 る人の目を引き込むと ともに、情報の組織化 にも役立つ。 4つの基本原則 4原則の意識で、デザインをコントロールできる 近接 見出しと説明文を 近づけ、 他の原則の間に スペースを作った
13.
近接 関連する項目を近づ けてグループ化する。 近接することで、1個 の視覚的ユニットとし て認識される。近接の ためには空白も重要。 整列 「右ぞろえ」「左ぞろ え」が洗練された印象 のデザインを産む。中 央ぞろえは退屈な印 象になるが、明確に意 図的な場合は強い印 象を与える。 反復 デザイン上の特徴を を作品全体を通して 繰り返す。反復させる 要素は色、フォント、 線の太さ、テクス チャー、等。反復は作 品の一貫性を生み、 情報の組織化にも役 立つ。 コントラスト 同一でない要素は はっきり異ならせる。 コントラストによって見 る人の目を引き込むと ともに、情報の組織化 にも役立つ。 4つの基本原則 4原則の意識で、デザインをコントロールできる 整列 左でそろえた
14.
近接 関連する項目を近づ けてグループ化する。 近接することで、1個 の視覚的ユニットとし て認識される。近接の ためには空白も重要。 整列 「右ぞろえ」「左ぞろ え」が洗練された印象 のデザインを産む。中 央ぞろえは退屈な印 象になるが、明確に意 図的な場合は強い印 象を与える。 反復 デザイン上の特徴を を作品全体を通して 繰り返す。反復させる 要素は色、フォント、 線の太さ、テクス チャー、等。反復は作 品の一貫性を生み、 情報の組織化にも役 立つ。 コントラスト 同一でない要素は はっきり異ならせる。 コントラストによって見 る人の目を引き込むと ともに、情報の組織化 にも役立つ。 4つの基本原則 4原則の意識で、デザインをコントロールできる 反復 コントラスト 上下に青い帯をつけた 見出しは大きく、色をつけた 強調する部分を太字にした フォントの使い分け
15.
デザイン修正 やってみた
16.
モデル
17.
愛生会のHPを直してみよう! ※現在はリニューアル済です ※著作権関係でキャプチャ削除 http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/ にて当時のページを閲覧可能です
18.
まず掃除から始めましょう (P.92)
19.
まず掃除から始めましょう ● 色を削る ● 以下を削除 -
院長の個人的なMicrosoftへの クレーム - 招き猫 - midi音源
20.
近接
21.
近接 ● スタッフ紹介ページ、外部リン クをグルーピングした
22.
整列
23.
整列 ● 左ぞろえと右ぞろえのライン を作った
24.
反復・コントラスト
25.
コントラスト&反復 ● 上下に帯をつけ、 病院名にも同じ 色を使った ● 病院名のフォント をメニューでも 使った ●
病院名を大きく目 立たせた
26.
Before ※現在はリニューアル済です ※著作権関係でキャプチャ削除 http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/ にて当時のページを閲覧可能です
27.
After
28.
もう一度宣伝
29.
「誘うほどじゃないけど、他にも誰か行くかな?」 というとき・・・ yurusuke.com
30.
ご清聴ありがとうございました! 澤井 友恵 @tomoeine センスゼロエンジニアが ノンデザイナーズ・デザインブック を読んでどこまでできるか試す
Download