Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エディトリアルデザインの基礎
Search
Designsprint
December 15, 2016
Design
2
1k
エディトリアルデザインの基礎
Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。
Designsprint
December 15, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
120
ExOスプリント
designsprint
0
250
designsprint デザインスプリントのすすめ
designsprint
0
120
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
96
Exponential Transformation - ExO SPRINT
designsprint
3
390
ExO SPRINT 説明会
designsprint
0
68
デザインスプリント1日説明会+ワークショップ
designsprint
0
140
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
200
designsprint-Jobs-To-Be-Done01
designsprint
0
82
Other Decks in Design
See All in Design
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
160
Ubie Vitalsの取り組み紹介
8845musign
0
590
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
B/43プラスカードができるまで
putchomsmartbank
1
630
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
3 Reasons Why I Got into Design
harukausui
1
130
Sunny Day Storyboard
ctagulao98
0
190
ホワイト化するこの世界の片隅に
hisayosky
0
190
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
320
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
430
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
Featured
See All Featured
Scaling GitHub
holman
458
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Building an army of robots
kneath
301
42k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
What's new in Ruby 2.0
geeforr
338
31k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Docker and Python
trallard
37
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Transcript
Webデザイン基礎講義 currently v 1.1 「エディトリアルデザインの基本」
エディトリアルデザインとは 新聞・雑誌・書籍・カタ ログ・マニュアルなどの 出版物のデザイン。読み 手の視線、意図を考えて 視覚的に効果的な図や写 真等を整理・配列・編集 あるいは計画すること。 紙面構成。 この仕事をする職種をエ
ディトリアルデザイナー と言うが、グラフィック デザイナーと兼ねる場合 が多く、その境界線はあ いまいである。
3/19 コンポジション (構成・レイアウト) エディトリアルデザインの基本
4/30 バランス 紙面の各要素のバランス が適切でないと、意図し たように⾒えない。 強調するところ=大きく 脚注=小さく 同じ要素= 同じ大きさで 同じグループ=
まとめる タイトル 一番重要な要素 脚注 次に重要な 要素 参考文献 左 右 の つ な が り 薄 い の で 余 白 を 広 め に あ け る 1 2 3
5/30 要素 バランスをとるためには、 当然予め、どんな要素を、 どれくらいの分量必要な のか、洗い出しができて いなければならない。 •このページに必要な要素 1.一番重要な要素(400文字程度) 2.次に重要な要素(200文字程度、写真必要)
3.参考文献(分量未定) 4.1の脚注 ・ ・ ・
6/19 ⽐率 エディトリアルデザインの基本
⻩⾦⽐ 古代ギリシャで発⾒され、 人間にとって最も安定し、 美しい⽐率とされる美術 的要素の1つ。外中⽐。 中外⽐とも言われる。 近似値は1:1.618、約5:8。 世界で最も美しい縦横比 1 1.168
白銀⽐ 数学定数(変数に対して、 値の変わらない数)の1つ。 直角二等辺三角形の短辺 と⻑辺の⽐。 近似値は1:ルート2。 別名「大和比」。日本古来の建築物や都市景観に活かされた。
9/19 参考:その他の⽐率 画面アスペクト比(規格) ◆従来型テレビ(SDTV)の⽐率 「4:3」 ◆ハイビジョン(HDTV)の⽐率 「19:9」 ◆コンピュータディスプレイの⽐率 「16:10」 映像(ディスプレイ)の世界にも独⾃比率がある。
⽐率の具体的な使い⽅ ブラウザの画面は、ユー ザによって自由にサイズ を変えることができる。 制作者側でサイズを規定 しないと、どこまでも崩 れたレイアウトになって しまうので、最初にサイ ズとバランスを決める必 要がある。
さらにサイズはピクセル 単位で決められるので、 感覚でバランスをとろう とすると規定がないので 決めきれなくなってしま う可能性がある。 例:⻩⾦比で画面を分割する ヘッダとグロナビ メインビジュアル 13 8 5 W960 H226 H367 H593 PCの画面デザインだけの時代はよく使 いましたが、最近はスマートフォンな ど多デバイス対応(画面によってサイ ズや⽐率が変わるため)が前提なので 、あまり使わなくなってきています。
⽐率の具体的な使い⽅ 例:⻩⾦比と⽩銀比を比較する
具体的な使い⽅ ⻩⾦比と⽩銀比を比較する
13/19 ルールを作る・守る エディトリアルデザインの基本 (整理整頓/キレイに、⾒やすく・読みやすく)
ルール1:揃える ⾒やすくするための一つ 目のコツは整理整頓。た いした労⼒がかからない わりに大きな効果を発揮 するのが「揃え」。 赤い点線をイメージしな がら、テキストと図をぴ ったり合わせるように配 置すれば、かなり整理さ
れて⾒える。少しでもず れていると、印象がよく ない上、可読性も低下す る。 揃えられるものは、全て揃える 用語: インデント, 右揃 え, センター揃え (中央揃え), 左 揃え 赤線のように揃っているよう に⾒えるが、実際には「右揃 え」である。
ルール2:細部も例外なく揃える 左の例のように、写真のタイトルが写真自体よりも文章に近づ いていると、タイトルであることが直感的にわからない。写真 とそのタイトルが一つのグループを成すように、相対的に近く に配置するとグループを認識しやすくなる。この時、左揃えを 使うと、グループの印象が強くなる。
ルール3:まとめる 内容に即してグループ化を⾏なうことで、全体の構成やロジッ クが理解しやすくなる。関連の強い文章と写真同⼠を近くに配 置(=グループ化)すると内容を直感的に理解しやすくなる。 また逆に関連の弱いものは意図的に少し離して配置する(上下 でスペースを取る)ことで、よりグループ化が強調される。 関連の強いもの同士を相対的に近づける
ルール4:余白を使ってまとめる 2つ以上の項目が連続しているような場合、タイトルと文章の 間隔よりも、項目間の間隔が短いとグループを認識しづらく、 全体像を把握しにくくなる。右のように項目ごとにグループ化 すると、全体像を把握しやすく(⾒やすく)なる。
ルール5:強調する ⾒出しも文章も同じサイズで単調に書かれているとどこに注目 すれば良いか分からない。喋る時の抑揚と同じように、文字に も視覚的な強弱を付けると、⾒やすくすることができる。 文字の「太さ」や「サイズ」、「色」を変える、背景に色を付 けるなどの手段がある。 重要なところ・そうでないところの強弱を付ける
参考:色を使ってまとめる 2つのコンテンツがあり、それに対応した2つの図がある時、 かつ色で分けた⽅が有効な場合「色により関連付ける」ことも できる。図に枠を付けその枠と小⾒出しを同じ色にしてみると、 テキストと図の関係がより密接なものになり、理解を助けてく れる。 ⾊によって関連付けを意識させる⽅法もある