603
ホリウチ ショウゴ / Shogo Horiuchi @syo_design
説明書など、内容が難しそうな物を デザインする時に簡単そうに見せられるポイント ・フォントは丸ゴシック ・図形は角丸にして親しみ感 ・アイコンを入れる ・文字間は広めにとる ・暖色を使ってみる ・強調箇所は太めのマーカー これだけで、簡単そうに見えて 難しさのハードルが下がるマジック。 pic.twitter.com/DtMNlY2WbU
拡大
Ti@C96金曜8/9南ム11b @ti_titanium
なんか取っつきやすい印象を受ける不思議
ジョバンナ @jovanna_art
@syo_design こういうデザイン論めちゃ好きです。
みっきぃ @miki73_m
わかりやすい。afterは最近よく見るデザインで普段なにげなく見てるけど、こんな裏側があったのか…… twitter.com/syo_design/sta…
むちまろ @kumagai_
行間ピッチピチのノートよりもゆとりのある行間のノートの方がわかりやすく感じたのはそういう事だったのか twitter.com/syo_design/sta…
AXEL @AxeLogo365
本当にデザイナーの仕事って縁の下で支えてるなぁって実感します。 Afterの画像は全体的に優しく、柔らかくなってる感じがしますね😲 表現が合ってるかわかりませんが、食べやすくなった感じがします🧐 twitter.com/syo_design/sta…
肉塊 @o29nikukai
@syo_design 「難しいことを簡単に伝えるのは難しいけどそれができてこそホンモノ」「そんで視覚情報が8割」って偉い人が言ってたので、このアプローチはめちゃんこありがたわっしょい
すでに活用している方や例も

なんかできそうな気がして買った参考書籍、内容はめっちゃ難しかったことがある…

ZenLab @zenlabmmm
@syo_design 市販の参考書系書籍は丸ゴシック、角丸使用が多いですよね。
ホリウチ ショウゴ / Shogo Horiuchi @syo_design
@zenlabmmm デザイン系の書籍は多そうですね。 他はわかりませんが、ハードル下がりそう。
ukwhatn @ukwhatn_scp
確かに「1からわかる」とか「やさしい〇〇」系の受験参考書って大体こんなデザインだな twitter.com/syo_design/sta…
毎日夜に薬を飲め 車検証 @am_am_um
なるほど 「初心者でもよくわかる数学」みたいな本はこんなフォントだ
ちー。 @chigu_1214
これ、私がマニュアル作るときにあえて意識的に使ってた。 twitter.com/syo_design/sta…
koro @koro_ac
参考にしよう。 そういえば自分の考えまとめるとき、丸ゴシック使ってた。 twitter.com/syo_design/sta…
様々な感想が寄せられる

デザインしてみたい方の参考になるかなと

MOE @moemi_miami
びっくりした・・・ほんとだ・・・! twitter.com/syo_design/sta…
天むす名古屋 Temmus 𓃠 @temmusu_n
マーカーは読みにくいが、他のポイントは分かりました。アイコンなんて理解不能ですが、確かに読みやすさに貢献しています。不思議! twitter.com/syo_design/sta…
堀場工房 潜伏中 @horiba_wataru
これはルールブックを作る時に有用! 今まで重要箇所を赤字にしていたけど、たしかに「太めのマーカー」のほうが見た目のあたりが柔らかい気がする。 他の項目も頷けるところが多い。 twitter.com/syo_design/sta…
ちるゑ @xe0ko
視覚優位のせいか、この「難しそうに見える物をイージーそうに見せる」ポイントを全部盛りされると、情報過多で頭がパンクする…。 助かるのは『丸ゴ、図形の角を丸く』。マーカーやアイコン等図形の要素が増えるとキツイ。この手の参考書が最近多い…。ぱっと見可愛くて取っつきやすいんだけどね。 twitter.com/syo_design/sta…
残りを読む(21)

コメント

sappukei @smashpoppin 2019年7月17日
フォントはマジで大事
狐謡 @Towa_towa_to 2019年7月17日
@syo_design さんのafter、正直マーカーが読みにくい。文字の半分が他の色で潰れてるのがあかんのだろうな。後俺、文字と文字の間が開いてるからと言って、別に読みやすくなってるとか感じる人間じゃないんだなって解った。フォントはともかく、アイコンや必要以上の文字間隔開けは、「活字への抵抗感を薄める」役にしか立ってなくて、読みやすさへの貢献ではない気がする。
枯れ木の花 @hC0VxYkBEE49hgR 2019年7月17日
読みやすさっていうか、「わかった気にさせやすさ」と思うね 外部向け講演とかならいいけど、社内で使ったらそりゃ怒られるよ。小手先で誤魔化すつもりかと
影山影司 @apto117 2019年7月17日
これもしかして、普段活字を読んでない人ほど右のほうが読みやすく感じるってこと?
ふぁむ氏 @phantom0730 2019年7月17日
行間も意外と大事 字がギュっと詰まってるとウッてなる
(あ) @MutsuniNaruBeam 2019年7月17日
(デザインの話と聞いて、またテプラの出番かと思ってしまった…)
イモモン @mizubeyu 2019年7月17日
ポップ体にしてスーパーの広告みたいにしよう
ねるにあ†Ridill @nelnia 2019年7月17日
角丸と暖色は仕事でもよく使ってるテクニックだけど、こういう小技をいくつも身につけて、さりげなく使いこなすのが大事なんだろうなと
苺危機@新NEW社員 @f04041 2019年7月17日
カチッ って音が聴こえてきた フォントってすげぇ
アーサー・エリス @AEliss0609 2019年7月17日
タメになる話だなーと思って読んでたら突然の4.5pで腹筋をやられた
okwae @okwae858 2019年7月17日
マーカーとアイコンのせいで「いかがでしたか?」がチラついてダメだった
出無精マスク @annoupoteto 2019年7月17日
フォントがゴシックからUDになればなお良し
さろげーと @surrogatepair 2019年7月17日
apto117 最近のWebデザインの主流、というところから考えると確かにその傾向がある可能性は高そう
すらーく @slarq 2019年7月17日
ウース異本って表現が衝撃的だった。
hignon @higunonno 2019年7月17日
キュレーションサイトのうっすい情報かな?って気持ちになる…
海◆eoxyl9RE @umi_eoxyl9RE 2019年7月17日
FAXで小マニュアルや報告書を送る場合は数字が3が文字が歪んで8に見えたりする事故が起こりやすいので、フォントと大きさを工夫とかしてるなあ。あと蛍光ペンはもうクライアントで紙に直接ひいてもらうよう仕掛けを入れてる。
yoshiko @yosii_0609 2019年7月17日
左の方が読みやすいし、右のマーカーよりは左の赤字の方が記憶に残りやすい。子供のときから左の形式の教科書で育ってきたせいだろうなあ。
RGB000 @19666_61 2019年7月17日
左のほうが専門書のような堅苦しい雰囲気があるのは事実だな。この雰囲気だけで読めない(読む気が失せる)人は多いと思う。でも右が無理な人もいるのも事実か...WebとしてはただCSS書き換えるだけだけど
RGB000 @19666_61 2019年7月17日
用語系で右は確かにうざったいな...概念解説系は右のほうが読みやすくてありがたいんだけど
Tadashi @tadashifx 2019年7月17日
慣れの問題か私も左の方が読みやすい。ついでに、右はパッと見易しい感じに見えるので、これを理解できない時「俺の老化もここまで来たか…」と凹みそう。
しゃけちゃづけ @DdHhhl 2019年7月17日
え、無料でこんなに情報伝達技術を公開していいの!?てくらい有り難いまとめだ
gx9900 @GX9900GUMDAMX 2019年7月17日
afterはとっつきやすいけど読みにくいわ。あと作るのめんどくさそう。
ながいずみ(個人用) @nameriizumi 2019年7月17日
本のとっつきにくさを改善するならAfterだけど、結局流し込むテキストが専門書並みの濃度たと「視覚的とっつきやすさ<実際の文章の濃さ」になっちゃって脳みそバグる。人工甘味料入りのコーヒー飲んでも頭回らないのと同じ。私はこれを「自称わかりやすい参考書現象」と呼んでいる
ながいずみ(個人用) @nameriizumi 2019年7月17日
この「自称わかりやすい参考書現象」が起こると、せっかく手に取ってもらえたのに本文での離脱率が高まってしまい、積ん読行きになりやすい。フルカラー使えるなら写真の情報量で文字の情報量を薄めてやったほうがいいし、モノクロなら文章そのものを平易にするくらいに抑えて角ゴシックも明朝体もやめないほうがいい。中途半端にテコ入れすると、せっかく作った記事や本が既存読者に煙たがれ新規読者も定着しない悲劇が起こるぞ!(実体験
キタムラシステム @kitasys 2019年7月17日
丸ゴシックが特別どうだとは思わない。なんならOsakaでも十分よみやすい。ただただMSフォントには速やかに絶滅してもらいたい。
春夏秋冬 @akito110 2019年7月17日
上司「ふーん、いいんじゃない。じゃあこれエクセルで作ってよ」
gaheki @gaheki 2019年7月17日
入門用と熟練用で使い分ければいいねん
uniuni @wander__wagen 2019年7月17日
ふぉんとだ~~! 入門感ある!
000 @qgatmdgtwd 2019年7月17日
いかがでしたか?
SAKURA87@多摩丙丁督 @Sakura87_net 2019年7月17日
Wordはオートシェイプを駆使すれば大体どうにかなるよ。
SAKURA87@多摩丙丁督 @Sakura87_net 2019年7月17日
逆に真面目を演出したいときは落ち着いた色味でゴシック体・明朝体を使えばよいと。
正直者は夢を見る @image_initium 2019年7月17日
アフター、なんか女性向け雑誌っぽいですね。仕事では論文めいたものをパワポに落としてなんぼなんですけど、雑誌の文は飾りであって、読まないもんだと思っている…。
kartis56 @kartis56 2019年7月17日
新聞や文庫本はフォント大きくなったし行間も開いた
えんぞ @jinsei_febreze 2019年7月17日
apto117 絵本は文字間広いでしょ。 一行空けがデフォみたいなノリで 改行しまくるポエムとか見れば どういうことかよくわかると思うの。
えんぞ @jinsei_febreze 2019年7月17日
アフターはサマリーレポートやプレゼンに、ビフォーは仕様書や手順書に使い分ければいいだけだよ。
maci @ma_ci6 2019年7月17日
なんか右の方が胡散臭さ増さない?
ジョージ2世 @GEORGE221 2019年7月17日
文字間隔が空きすぎると単語が認識しにくくて、かえって理解が妨げられる
Masaki☆ @masaki_kkmt 2019年7月17日
行間はともかく、変に字間を空けると逆に読みづらくなる。
黄色いかまぼこ @yellow_chikuwa 2019年7月17日
右のほう、一番下に「いかがでしたか?」って書いてありそうな。
takatakattata @takatakattata1 2019年7月17日
「簡単そうに見せられる」って言ってるだけで「読みやすい」とは言ってないからね 入門書感出す方法としては丸ゴはいい選択
夏越丸@ねんくり引き取り先募集 @nagoshimaru 2019年7月17日
下半分マーカーっていつから流行りだしたんだろう…
テレジアさん(Theresia) @Theresia 2019年7月17日
幼児向け玩具の説明書からルビを取り除くと、ほぼafterになる(マーカー除く)。
鹿 @a_hind 2019年7月17日
赤字強調とか乱用すると読みづらくなるしモノクロで印刷するとかえって目立たなくなるしであまりよくないんよね。 かといってマーカーでも同じ事になりそうではあるが。これただの流行(どこで流行ってるのかしらんが)なのかもしれないね
手薄@ほぼtogetter用 @Teusexmachina 2019年7月17日
これbeforeも相当気を配ってて十分読みやすいよなー(実際好みが割れてるし) 非デザイン系の現場とか、特に社内資料の類はスタートラインのはるか後方的な酷すぎレイアウト例を大量に見る気がする…
ミンツ @mintsu1111 2019年7月18日
これまでの話の流れでいうと、ミもフタもないことをいってしまえば取扱説明書のような万人が目を通す文書は、国語力の下位の「バカ」にあわせてフォントなどを組みましょうということだよね。
いす @IrGGkz9pWHEF4b8 2019年7月18日
mintsu1111 わざわざそう言い換える理由って何?ちなみに私はバカなので見やすいと凄い助かる
たかつき @taka4tsuki 2019年7月18日
文章の情報に集中したいときはBeforeの方がええなあ。Afterは情報過多で内容が頭に入ってきづらい気がする。
団扇仙人 @uchiwamaster 2019年7月18日
「いかがでしたか?」のサイトがどういう風にして作られてるかという話としては面白かった。「わかりやすそうに見える≠わかりやすい」この違いは重要…
Victim on Pessimism @on_pessimi 2019年7月18日
行間が開いてると書き込みがしやすいから好きだよ(論題から逸れすぎた発言)
penguin99 @penguin9912 2019年7月18日
「知識のない人/マーケティングを目的にしている人がネット情報を真贋まぜあわせて書きました」といった記事がAfterの手法を多用しているので、ネタとしては読むけど、調べ物をしている時はAfterは読まずに即閉じます。
ログインして広告を非表示にする
ログインして広告を非表示にする