Pinned Tweet
改めて、シング(thingnld)です👀✨
グラフィックを作って、「なんでこうしたか」まで話してます。
完成版だけじゃなくて、ボツ案も見せちゃいます😂
📌連載中はこちら
①「なんか良い」の正体
良く見えるデザインの「なんか」を種明かし!
②ボツから見るデザイン
ボツと完成を並べて、何を変えたかBefore / After で!
③今日もグリッドデザイン
揃える・あえて外すのポイント、そして使い分けをお見せします!
普段はデザインもディレクションもやってます👍
案を通すときに強いのは「センスいいでしょ?」じゃなくて、「主役はこれ、だからここは空けてます」って言える案なんすよね。
その「なんで」を言葉にしてお届けします✨
私もやってみたよー!って報告おまちしています🫶
こういうTHEグリッドデザイン、やってみたい人多いですよね?👀
今日もグリッドデザインやってみましょう✨
今回のタイトル、SAME AS YOU ARE。
4つの単語でバラバラに置いてます。
普通こんな離して置いたら散らかるんですけど、
散らかって見えないんですよね。
そりゃ、グリッドに合わせてるからじゃね?
…それだけじゃないんです!
SAMEとAREを見てください。
画面の上と下でいちばん離れてるやつです。
この間を、右端の縦長のグラフィックが通ってる。
だから離れてるのに、ちゃんとつながって見える。
ASとYOUは距離が近いので、そのままで関係が見えます。
んで、空いたところには黄緑のライン。
ここが流れを作ってくれてます。
離して置くときは、揃えることより間に何を置くのか。
そして何を置かないのかが重要。
グリッドはあくまで土台です!その上で、どうつなぐかを考えるんです✨
2枚目にグリッドも載せてるので、見比べてみてください🙌
ボツから見るデザイン第5回🔥
1枚目(左)がボツ、2枚目(右)が完成✨
完成のほう、昨日ポストしたやつです。
実はこうなる前に、こっちを作ってましたw😂
赤・青・モノクロ人物に大き目のタイポグラフィーを絡めて、コントラスト強めのグラフィックを作りたいと思ってたんです。
このビジュアルだったら、山と空にベタっと色を入れて、タイポグラフィーの重ね順も山とか人物とかいい感じにイケるかな!?
…って感じで作り始めたのですが
全然グッと来ないんですよ、これがw
雰囲気は良いんです。
でも、しっくりこないのを解消しようと色々詰め込んで。
ただ詰めただけだから全然良くならない。
そもそもコントラスト強めにしたかったんだから、
もっとソリッドに要素を減らしていけばよかったんですよ。
手を動かしながら完成形が変わっていくこともあるけど
今回は悪い方向に進みましたw
で、一旦仕切り直し🙏
余白のあるビジュアルだから、太めのタイポをシンプルに絡めて誌面っぽいやつに!
「空間を活かす」って軸がぶれなかったので、サクッとレイアウトは決まりました。
あとは誌面っぽい感じをプラスしてみようと。
軸そのものを立て直すのはアリなんですよ✨
ダメなのは、軸がないまま手を動かし続けること。
何かを作るときは、表現したいことがあるはず。
そこがぶれ始めたら、一回止めたほうがいいですね!
このテイストはまた次回やってみます!!🔥
誌面っぽさを出したいなら、隅にテキストボックス!!👀
今日もグリッドデザインやってみます~✨
余白を生かしたビジュアルに、太めのタイポを絡ませる。ここまではいつもの作り方っすね。
で、右下にテキストボックスを置きます。
しっかりジャスティファイして、四角い塊にする。
これだけで一気に誌面っぽくなるんですよね~!
ポイントは隅に置くこと✨
真ん中に持ってくると、ただの説明文になっちゃう。
隅にあるから「誌面の一部」に見える。
誌面そのままを再現しなくてもよくて、
ポスターや広告じゃない「誌面っぽさ」が出せればいい。そこが面白いところですね✨
2枚目にグリッドも載せてるので、見比べてみてください🙌
完全な余談ですが、冬に向けて軽量なダウンジャケット買いました!
3年位買いそびれてたのですが、やっとこさゲット!
冬が待ち遠しい!そんなウキウキも込めたグラフィックでしたw🤣
誌面っぽさを出したいなら、隅にテキストボックス!!👀
今日もグリッドデザインやってみます~✨
余白を生かしたビジュアルに、太めのタイポを絡ませる。ここまではいつもの作り方っすね。
で、右下にテキストボックスを置きます。
しっかりジャスティファイして、四角い塊にする。
これだけで一気に誌面っぽくなるんですよね~!
ポイントは隅に置くこと✨
真ん中に持ってくると、ただの説明文になっちゃう。
隅にあるから「誌面の一部」に見える。
誌面そのままを再現しなくてもよくて、
ポスターや広告じゃない「誌面っぽさ」が出せればいい。そこが面白いところですね✨
2枚目にグリッドも載せてるので、見比べてみてください🙌
完全な余談ですが、冬に向けて軽量なダウンジャケット買いました!
3年位買いそびれてたのですが、やっとこさゲット!
冬が待ち遠しい!そんなウキウキも込めたグラフィックでしたw🤣
何も置かない場所、先に決めてますか?👀
今日もグリッドデザインやってみましょ~✨
今回は置くとこ、置かないとこをはっきり分けました。
いつも言ってるんですけど、メリハリが大切なのですよ。
まず人物の顔に視線がいく。
そこからタイトル。
その下のテキストへ降りていく。
要素を散らさないで一方向にまとめると、
視線がちゃんと流れてくれるんですよね。
上部を空けたのは、視線を散らさないためです。
最小の要素で最大の効果を狙いたいよね。
グリッドがあるからって、何でもかんでも置いて
隙間を埋めなくてもいいんですよ。
「何も置かない」っていうデザインをするんですよ✨
チョイ技としては、フィルムカメラっぽいライトリーク。いつものノイズだけよりニュアンス出るよね🙌
タイトルはhoursだけイタリックに。
フィールドぼかしも重ねて、より印象的に。
ちなみに、今回は某映画ポスターからインスピレーションをいただきました。好きな映画です!
2枚目にグリッドも載せてるので、見比べてみてください✨
「なんか良い」の正体👀⁉、第5回です!
同じような構成なのに、派手だけど落ち着いて見えるデザインってありますよね。
雑誌の表紙とか、ブランドのポスターとか。
要素はけっこう詰まってる。
文字もいっぱい入ってる。
なのに、うるさくない。
その正体は、フォントです!!✨
使ってる文字を見てください。
Beyond Pretty、PROCESS、Cowboys From Hell、Never Settle。
それと真ん中のthingnld。
全部セリフ体なんですよ👀
シュッとしてるやつですね、セリフ体。
普段私がよく作ってるやつは、だいたい逆です。
極太のサンセリフをドーン!って感じ。
あれはストリートっぽさとか、勢いが出る。
でも今回はセリフ体がメイン。
それだけで、同じ要素構成でもガラッと印象が変わります。
だから「なんか派手だけど落ち着いてるかも」って感じるときはレイアウトよりも、何のフォントを選んだかだったりします。
レイアウトを変えなくても、フォント選びだけで雰囲気は変えられます!!
2枚目にはグリッドも載せてますので、見てくださいね👍
こんな感じのTシャツ、夏の間に作りたかったな~✨
完全に自己満ですけど、色々と作ってみるの楽しいですよ。普段はディスプレイの中でしか見ていないものが、現実の世界に現れると、結構嬉しいものです。
同じロゴなんだけど、全然違って見えませんか?👀
気軽にロゴ作ってみたシリーズ。
COWBOYS FROM HELL!!(名作ですね)
やっぱロゴドーン!でカッコイイやつ作りたいよね🔥
モノクロ写真に蛍光ピンク。グレーとピンクは鉄板。
オレンジに黒は、もう完全にプリントT。
2枚目は馬のイラストも足してるけど、それも黒一色。
やってることは実は同じなんですよ。
どちらも使ってる色は2つだけ。
そこにガツンとコントラストつけてるだけ。
でも組み合わせが違うと、こんなに印象が変わるんですよね✨
同じ素材でも、どう料理するかで全然違うものになる。
そこが楽しいとこですね!!
夏の間にロゴT色々作れば良かったなぁ~
同じロゴなんだけど、全然違って見えませんか?👀
気軽にロゴ作ってみたシリーズ。
COWBOYS FROM HELL!!(名作ですね)
やっぱロゴドーン!でカッコイイやつ作りたいよね🔥
モノクロ写真に蛍光ピンク。グレーとピンクは鉄板。
オレンジに黒は、もう完全にプリントT。
2枚目は馬のイラストも足してるけど、それも黒一色。
やってることは実は同じなんですよ。
どちらも使ってる色は2つだけ。
そこにガツンとコントラストつけてるだけ。
でも組み合わせが違うと、こんなに印象が変わるんですよね✨
同じ素材でも、どう料理するかで全然違うものになる。
そこが楽しいとこですね!!
夏の間にロゴT色々作れば良かったなぁ~
帯入れたけど、そこだけ別のデザインみたい…
ってことないですか?👀
今日もグリッドデザインやってみます✨
下部に帯を入れたい。
でも、ただ帯を敷いただけだと、なーんか、しっくりこない…
それって、画面が分断されちゃってるからなのね。
今回は左側の大きな縦タイトルを、
ビジュアルと帯をつなぐ橋渡し役にしています。
さらに後ろにはアウトラインのタイポも重ねて、
上と下が別々に見えないようにつながりをつくる。
昨日のポストでも言ったけど、XYだけじゃなくてZも意識ですね👍
帯はしっかりとしたカラーにして、テキストもちゃんとコントラストつけて。
帯も「余ったスペースを埋めるための場所」じゃなくて、ちゃんとデザインの一部として扱う!
最小限のパーツで、しっかり目を引くデザインになりました✨
2枚目にグリッドも載せてるので、見比べてみてください😆
文字って、全部見えてなくても読めるんですね👀
はい~、今日もグリッドデザインやってみます✨
今回は、ファッションフォトをモチーフにした1枚。
赤いシェルジャケットの人物に、まず自然と目がいきますね。ゴープコアスタイルですね。
その後ろに大きな文字を絡めてるんですが、
「MAG」までは見える。
最後は「ETIC」。
ってことは「MAGNETIC」だろう
全部見えてないのに、ちゃんと読めちゃいます👀
何でも隠していいわけじゃないです。
「G」が全部人物の後ろに隠れていたら、一気に読みにくくなる。
今回は「G」の一部をジャケットの後ろ、一部を前に出して、人物と文字を絡ませています。
グリッドに沿ってXYの位置を整える。
そこに前後関係を加えて、Zをつくる。
そうすると、平面だったグラフィックにも奥行きが生まれる!!
最小限の要素で、XYだけじゃなくZまで表現する。
今回はそんな感じのグリッドデザインです🙌
ちなみにシルバーウィークは結構デジタルデトックスしてました😂
アナログにインプットしたり、シルクスクリーンしたり、ポスカでロゴ描いたりしてました✨
ロゴはまっすぐ置いてるのに、なんで動きがあるように見える?👀
今日もグリッドデザインやってみましょう✨
メインの白ロゴをドーン!と置きたい。
でも、それだけだとちょっと動きがなくてつまらないな。
よし。蛍光グリーンの帯を入れてみよう。
うん、何本か重ねるの良さそう。
あ、斜めだ!!今回は斜めだ!!!💡
あ、黒いタイポも重ねたら面白そう。
うん、ひとつの塊みたいにしちゃおう。
人物のポーズも斜めだし、これならバッチリ🙌
…みたいな感じで作ってます。
上に置いた白いメインロゴは、逆にしっかりグリッドに合わせてます。
画面幅にも合わせてドーンと置いてるので、ここはかなりどっしり安定。
でも背景の帯やタイポは斜めに流しています。
その対比で、ロゴ自体は真っ直ぐなのになぜか画面全体には動きがあるように見えるんですよね。
全部自由に置いちゃうと、本当にただ散らかっただけになりやすい😂
全部を動かさなくてもいい。
安定しているものの後ろで、動きを作る!
今回はそんな感じのグリッドデザインです✨
2枚目にグリッドも載せてるので、見比べてみてください!
いや~、ロゴ乗っけるだけでカッコよくなんないかなぁ〜っていつも考えてますw😂
これ、ロゴっていうのかな?
タイポや装飾をまとめたグラフィックパーツみたいな感じ。
「THG」ならシングって読めるだろう。ってところから作り始めました🙌
タイポや小さな装飾を組み合わせて、人物でも抽象的なモチーフでも、いろんなところに載せるだけで使えるやつにしたくて。
なので密度は結構調整してます👀
たぶん読まれないくらい小さい英文も入ってるんですけど、そこも適当じゃなくて、ちゃんと内容考えてます!
こういう「誰も読まんだろ!」ってところまで気にしちゃうの、デザイナーあるあるですかね。
自分用のこういうグラフィック、1個作っておくと結構楽しいですよ!!
英文に困ったら、自分のモットーとかスローガン、フィロソフィーあたりを入れると作りやすいです👍
ボツから見るデザイン第4回🔥
1枚目(左)がボツ、2枚目(右)が完成✨
はい、やりたいこと詰め込みすぎてますね。
一番見せたいのは人物なんです。
なのにDAZEがちょっと頑張りすぎ。しっかり視線が持ってかれる。
少し弱めようとハーフトーンにしたり、透明感も出してみたり。それでもまだまだ強い…
グリッドレイアウト感も出したくて、アレやコレやと配置。そしたら、今度はメリハリがなくなった。
迷走してますね…😅
で、作り直したのが2枚目(右)!
ちゃんと人物に視線も行く。
説明するようなタイトルはわざわざいらなかったな。
よし、ロゴグラフィックを小さめに載せよう。
このサイズなら透明とかいらんな、ベタでいける。
マイクログラフィックを要所に置くだけで十分✨
主役があって、それを支えるものたちがいる。
そうなると密度も自然といい塩梅になってくるんですよね👍
せっかく作るなら、色々と詰め込みたくなりますよね。
でも、まずは主役を決めることを忘れないようにね!😁
第3回「なんか良い」の正体👀⁉
良く見えるデザインの「なんか」を、今回も種明かししてみます!!
このグラフィック、最初にどこ見ました?👀
顔を見て、次にピンクの文字。
そんな順番で見た人、多いんじゃないですか?
このデザインは
文字、コピー、ロゴ、装飾など、けっこう色々載せてます。
でも、全部を同じ強さで見せていないんです👍
一番見せたいものは強く!!🔥
次に見せたいものは少し弱く。
それ以外は、もっと弱く。
今回は
顔 → ピンクの文字 → 細かい情報
くらいの優先順位をつけています。
大切なポイントは、
要素全部に「見て!!」って言わせないこと✨
そうすると、あれこれいっぱいあっても
「どこを見ればいいの?」って視線迷子になりにくいです。
「何を置くか」だけじゃなくて
「どのくらい強く見せるか」も大事ですよ~✨
2026年7~8月にポストしたやつはやつはこんな感じ!✨
20個か…
あれー?もっと作った気がしてたんだけどなぁ😂
今回は人物モチーフが多かったですね。
もうちょっとタイポグラフィーやロゴっぽいやつも増やしたいな、と思っています🔥
こんな感じも見てみたい!とかあったら、教えてくださいね!!🫶
「なんか良い」の正体👀⁉、第4回です!
このグラフィック、なんか良いなって思ってもらえたなら、それは蛍光グリーンと人物が噛み合ってるからです💚
こういう派手な色に写真を合わせるの、けっこう難しいんですよね。
色が強すぎて写真が沈んじゃうか、逆に浮いちゃうとか。
で、何をしたかというと、人物をハーフトーンにしました✨点の集まりで表現するやつですね。
これ、点の粗さで濃さを調整できるんですよ。
細かくすれば精細&濃く見えるし、粗くすれば薄くなる。
てことは、写真の強度を自分で決められるのです‼️
蛍光グリーンがこれくらい主張するから、人物はこのくらい。そうやって合わせてます。
色数も極限まで削って、蛍光グリーン+黒と白だけにしてます。
※ノイズを加えてタダの白じゃない部分も作っている小技もあり👍
強い色はね、イイ感じなんですよ。印象的だし。パッと見た時のインパクトは大ですよね。
でも、ただ使えばいいって訳じゃないんですよ。
どの強度&密度で合わせるか!!
そこが噛み合ってるかどうかで、印象が決まります!
派手なデザインが良く見えるとき、
理由は色の強さじゃなくて、
その強さに「何をどう合わせたか」なんです✨
⬅️左が完成版。
ハーフトーンと切り抜きのような白枠も入れてます👍
➡️右が写真そのまま。
蛍光グリーンと人物のトーンは合わせたけど、少し情報量が多い印象。
今日もグリッドデザインやってみましょう✨
全画面に写真を引かなくても、グッと目を引く1枚は作れます🔥
今回はタイポグラフィー中心でやってみました。
こういうのやってみたいですよね?
やり方はシンプルで、中心から外側に向かって、要素をだんだん小さくしていくだけ。
まずメインのビジュアルとタイトルを決める。
そこにネオンオレンジを重ねてインパクトを作る。
この辺りが一番強い部分ですね。
周りにはサブコピーを置く。
これは読ませる目的じゃないので、可読性はそんなに気にしてません。
手書きの矢印でちょっとした違和感とアクセントを足してみました。
さらに外側はもっと細かい要素。
上も左の文も、読ませるつもりで置いてないんです。
メインビジュアルを中心に一番強くて、外に向かうほど弱くなる。これだけで、要素がたくさんあってもごちゃごちゃしないんですよね👀
しっかり余白を確保しているのと、
グリッドに揃えているから整って見える。
ちなみに今回、メインビジュアルは右端だけグリッドに揃えて、上・左・下はガッチリはみ出させてます。
そこが単調にならなかった理由ですね✨
中心から外へ、だんだん小さく。
ここを意識してやってみるといいですよー!
今日もグリッドデザインやってみましょう✨
色んな要素が散りばめられたやつ、よく見ますよね。
やってみたいなぁ~とか思ってますよね!?
あれ、凄くシンプルなんですよ。
よく見ると、大きいものと小さいものしか置いてない✨
まずビジュアルに対して、メインのタイトルをどこに置くか決める。
あとで微調整していいので「ここかな!?」ってとこに置いちゃう。
ちなみに、今回はFOLLOWという文字を少しバラバラにして、重ねて、フィールドぼかしをかけて 少しミステリアスにしました。
そこから画面内の密度を見ていって、足りないところに情報を入れていきます。
「O」に合わせて左側にテキスト。
「W」に合わせて下部のサブタイトル。
サブタイトルはグリッドに対して均等割り付け。
あとはマイクロコピーを入れてバランスを見る。
この時の最重要ポイント👀
中途半端な大きさのオブジェクトは置かない‼️
こういうの作るとき、あれこれ画面内に置くじゃないですか。そこで微妙なサイズにしちゃうと、全部が主張してメリハリがなくなるんですよね。
情報量は増えてるのに、なんか散らかってんなぁ…ってなるやつ。
あくまでもメインはビジュアルとタイトル。
残りはそれを支えるものとして置いていく。
だからサイズで差をつける。
そして全体のバランスを見ていく!
揃えるところは揃える。
メリハリをつけたサイズで置く。
これが基本です😉
わからないところあれば、いつでも聞いてくださいね~!
第2回「なんか良い」の正体👀⁉️
今日も良く見えるデザインの「なんか」を、種明かししていきます!
今回のテーマは、
「情報量が多いのに、なんでごちゃごちゃして見えないの?」
違いは「要素の数」じゃないんです。
減らしているのは、目が別々に認識する「まとまり」の数です✨
今回のグラフィックも、細かく見れば文字、写真、花、矢印、バーコードなど、たくさんの要素があります。
でも、ぱっと見で認識するのは大きく4つ。
①上部のタイトル群
②人物・衣装・花
③右下の矢印
④下部のコピーとバーコード
人物・衣装・花は重ねて、一個のビジュアルに。
矢印は形と向きを揃えて、3本を1つのまとまりにしています。
要素をそれぞれ独立させず、いくつかのまとまりとして見せる。
そうすると、情報量が多くても、視線があちこちに散ら散らばらないわけです。
「要素が多い=ごちゃごちゃする」
ではないんですよね✨
情報量を減らす前に、
目が追う「まとまり」の数を減らす!!
これを意識するだけで、
情報量はそのままでも、見え方はかなり変わります!
シング|thingnld retweeted
第2回「なんか良い」の正体👀⁉️
今日も良く見えるデザインの「なんか」を、種明かししていきます!
今回のテーマは、
「情報量が多いのに、なんでごちゃごちゃして見えないの?」
違いは「要素の数」じゃないんです。
減らしているのは、目が別々に認識する「まとまり」の数です✨
今回のグラフィックも、細かく見れば文字、写真、花、矢印、バーコードなど、たくさんの要素があります。
でも、ぱっと見で認識するのは大きく4つ。
①上部のタイトル群
②人物・衣装・花
③右下の矢印
④下部のコピーとバーコード
人物・衣装・花は重ねて、一個のビジュアルに。
矢印は形と向きを揃えて、3本を1つのまとまりにしています。
要素をそれぞれ独立させず、いくつかのまとまりとして見せる。
そうすると、情報量が多くても、視線があちこちに散ら散らばらないわけです。
「要素が多い=ごちゃごちゃする」
ではないんですよね✨
情報量を減らす前に、
目が追う「まとまり」の数を減らす!!
これを意識するだけで、
情報量はそのままでも、見え方はかなり変わります!
グリッドから外したところって、どうやって位置決めてると思いますか?
今日もグリッドデザインやってみましょう✨
毎度おなじみ4×8の32グリッドです。
はい、下の黒帯、見てください。
帯の高さ、グリッドに合わせてないんですよ。
じゃあ適当なの!?って訳じゃなくて
左下のバーコードだけはグリッドに合わせてます。
黒帯はそのバーコードに対して、適切なマージンを取ってるわけですよ。
その上のサブタイトルも同じ。
横幅はグリッドに合わせるけど、高さは合わせない。
黒帯に対してバランスの良いところに置く。
一つ決まれば、あとはそれを基準にできるんですよね~
上の黒帯もタイトルに対して良い大きさにしています。
グリッドは、何が何でも揃えるための線じゃないんです。基準を一つ作るための線!と思えば、そんなに怖くないですよ😆
今回は「あの」CDアートワークのカラーや表現を拝借しました🐰
分かった人はぜひ教えてくださいね👍










































