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
1.3k
エディトリアルデザインの基礎
Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。
Designsprint
December 15, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
140
ExOスプリント
designsprint
0
330
designsprint デザインスプリントのすすめ
designsprint
0
160
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
130
Exponential Transformation - ExO SPRINT
designsprint
3
530
ExO SPRINT 説明会
designsprint
0
94
デザインスプリント1日説明会+ワークショップ
designsprint
0
190
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
270
designsprint-Jobs-To-Be-Done01
designsprint
0
130
Other Decks in Design
See All in Design
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
560
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
120
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
540
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
What makes a great Director?
_limex_
0
320
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
140
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
320
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Embracing the Ebb and Flow
colly
88
4.8k
Speed Design
sergeychernyshev
32
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
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つの図がある時、 かつ色で分けた⽅が有効な場合「色により関連付ける」ことも できる。図に枠を付けその枠と小⾒出しを同じ色にしてみると、 テキストと図の関係がより密接なものになり、理解を助けてく れる。 ⾊によって関連付けを意識させる⽅法もある