見出し画像

☑︎チェックバック100案件から得た！デザインと構成の気づき💡👀📖 Vol.2(No.33~100)

Tomicha🍏

本年もよろしくお願いいたします！
新規事業の立ち上げから5名のデザインチームで駆け出しデザイナーしています、Tomichaです！

最近の私を一言で言うと「チェックバックに枯渇している。」です。
超ハングリーです。

そこで、改めてデザインのレビューをしている信頼のおけるクリエイターの方々の視点を浴びてみようと思い立ちました！

前回はやり方模索したままアウトプットしてしまったので　今回はルールを揃えて再度チャレンジ🔥

今回もBiscomの加藤さんとMハンドの岩松さんのチェックバックを参考にさせていただきました！🙇



No.33 太陽光発電メンテナンス・保守管理会社サイト

Pick Up👀
・強調したいボタンには押せる感を
・太陽光パネルの斜めの表現をあしらいに
・タイムラインとバナーが並ぶと、枠ばかりになるので要素を追加

気づき
・CVは目立つように、機能がわかるように訴求できるのがポイント
・MVは見てすぐnに、太陽光であるとわかるように大胆にはいち。
最近、このサイトなんのサイトだろうと思うMVは結構あるので、特に訴求性の強いLPなどはMVの直感的なわかりやすさが大切。

No.34ポイントカード紹介サイト

Pick Up👀
・感覚的に伝える、訴える
・全体の配色が絶妙
・並々で要素を区切る際には、その続きが気になるように影をつける
・大きめの吹き出しで、パッと見て直感的にわかるように
気づき
・ベタ塗りが続く場合には、背景にドットを敷くなど単調にならないように工夫する
・丸みのある要素はポップ
・シャドウは目立たせる、動きのある表現にも一役かう。


No.35建築資材・住宅設備機器の販売・施工サイト

Pick Up👀
・斜めカットは遊び心あるデザイン
・ボタンは軽く
・英字を仕切り役、縦書きでアクセント
・切り抜き方などリンクあるデザイン
・写真に写真を重ねる表現→斬新！
気づき
・黒帯の重たさを払拭する、デザインの＋ーをつける黒帯は目立たせ、引き締める役割
・ワイヤー時点である程度デザインが作られている→印象的な要素は取り入れつつ、要素感の幅も大幅に変わることなくそれでも会社の特色、色味を出してるビフォアフ参考にしたい。レイアウトが大胆に変わっていたりする


No.36スタイリッシュなコケ専門ブランドサイト

Pick Up👀
・穏やかな世界観を余白で反映
・デザインでは区切らず、写真を大胆に配置
・視線の動線確保のために緑のベタ塗りを曲線の余白に
・声援ではなく歪んだ円に
・売る感のないデザイン

気づき
・緑色のバランスによって重くなりがち
・最後まで、苔に浸る
・曲線は柔らかそうな一方で人工的な感じもするので、空いた余白や他のあしらいで自然にバランス取る方法勉強。

No.37着物のお直しサイト

Pick Up👀
・色の薄い帯で情報整理しきりの役割
・ヘッダーの引き締めに着物の帯
・着物の硬いイメージ払拭のため手書きのアイコン採用
・おびや仕切りの背景には着物の柄をあしらう→柄を楽しむ着物の世界観
・LINEの色はそのまま採用

気づき
・着物の印象が上品できっちりしている時に、私だったらその要素を抽出して目立たせてしまう。ここではロゴの手書き感やイラストなどで中和させている！

No.38親しみやすい、軽さのある製造業サイト

Pick Up👀
・コーポレーとカラーだけでは重くなりがちなところをオレンジ、ピンクでアクセントカラーに
・社名の由来をタグラインに
・イラストを文章に少し入り込んでいるかたち、文章とイラストをつなげる
・全て角丸にすると柔らかすぎるので併用
・背景を完全にしかず、半分にすることで軽さ、はみ出す写真も、広がりのあるデザイン
・わかりやすいカード型でCVを目立たせる

気づき
・製造業のテイストとは思えない明るさ！今っぽいアイソメの採用で軽さが出る。
使い方を間違えると、ITとか、Saasなどテック系に見えてまう気もするので注意！
・写真を縦横、配置をバラバラに置くことはよく見るけれど、後ろの社名でバランスをとり寂しくならないデザインに。


No.39幅広いユーザーをターゲットとした病院サイト

Pick Up👀
・ゆとりあるように、情報がスッと入って来やすい設計
・目に入りやすように、強く主張しないピンクで重要なお知らせを掲載
・フッターの情報は見やすく強弱、整理してデザイン
・採用情報はゆとりを持って掲載

気づき
・ファーストビュー（スクロールせずに画面に表示される部分）でたくさんの文字が目に入ると情報量が多くなり、ユーザーが迷ってしまいがち→MVは高さを抑えてFVでボタンまで表示されるように


No.40イラストでに賑やかなイベントサイト

Pick Up👀
・モチーフ３つ（桜・光・花びら）
・MVは区切りはきっちりと作らずイラストを重ねる
・柔らかいサイトなのでボタンも丸く
・チラシのフォントと一緒にする

気づき
・イベントサイトの場合、おsのワクワク感、行きたくなるようなデザインを意識する。
・モチーフはバランスをとって、大きさ、透過で寂しい雰囲気を払拭

No.41来店のきっかけをつくる建築・建設用の工具や資材等を販売する会社のサイト

Pick Up👀
・背景は白で統一しごちゃつかない
・MVはノコギリの刃
・ワイヤーよりもコピーを大胆に、配置と文字も６角形に
・写真は白黒で全体を引き締める
・英字の一部を塗りと重ねる表現（クール）
・余白が広くあるとクーつダウンに

気づき
・写真の下に線を引くとせるボタンと認識→線は囲むように変化
・ワイヤーにない英語のあしらいや動きのあるデザインに変化、モノクロ写真にアクセントカラーのデザインが素敵
・余白が広くあるとクールダウンに

No.42発芽野菜専⾨企業のサイト

Pick Up👀
・配置上下で、楽しいワクワク感
・MVは野菜の位置を通り胃道として調整、文字が見やすいように
・Topicsワイヤーからのアレンジでさらにスクロールで見れるように→を配置
・Topに戻るボタンはもやしで遊び心あるデザイン

気づき
・MVの左を少し開けている&左下は角丸で堅くならないように調整
・きちんと感、誠実さ訴求は明朝体を取り入れている

No.43お位牌の選び方を紹介するランディングページ

Pick Up👀
・MVは位牌の紹介に関するサイトだとすぐにわかるように
・タグラインはグラデーションと文字の大きさを変えて印象的に
・暗い印象になりそうなテーマなので背景や差し絵で主張しすぎずに明るくする

気づき
・普段慣れ親しんでいない、かつ専門的な要素が多いサイトの洗い出しかあデザインの落とし込み方を学べる
・長いLPでも背景の置き方、まとめ方、イラストでの区切り方重さとバランス

No.44ゴルフクラブのホームページ

Pick Up👀
・MVは位牌の紹介に関するサイトだとすぐにわかるように
・タグラインはグラデーションと文字の大きさを変えて印象的に
・暗い印象になりそうなテーマなので背景や差し絵で主張しすぎずに明るくする

気づき
・普段慣れ親しんでいない、かつ専門的な要素が多いサイトの洗い出しかあデザインの落とし込み方を学べる
・長いLPでも背景の置き方、まとめ方、イラストでの区切り方重さとバランスの配置の仕方

No.45テイクアウト専用のページ作成サービスサイト

Pick Up👀
・ボタンは押せるとわかるように→アフォーダンス理論
・文字だけ強調
・濃い色のマーカーでメリハリ、アイコンでも角丸を統一
・オプションのデザインは追加の＋ボタン、追加の様子がわかるようにデザイン（→視覚的にもオプション感伝わる、参考になるなぁ👀）

気づき
・ごちゃつかないように配色は抑える
・わざと区切り方はみ出して繋がりを出すなどLP制作では繋がり、区切りの方法が難しいお常々感じているので背景、写真など配置の仕方を意識する

No.46商業施設のサイト

Pick Up👀
・写真の形がサイトの世界観を演出
・細かな写真を散りばめてサイトの繋がりを演出、ところどことに
正方形を入れてアクセントに
・背景のイラストは揃えてばかりでなく、ずらして配置、サイト内では縦書き横書きもバランス意識して配置

気づき
・レトロなフォントがアクセント、散らばったり整えたりでメリハリをつけ、情報が混乱しないようにボタンはアクセントに。
Mapの配置早く見るし、一瞬デザインが区切られるのを利用してお知らせ前に

岩松翔太｜M-HAND, Inc.　岩松さんチェックバック


No.47リーガルメディアのHPサイト

Pick Up👀
・MVの写真はトリミングで人の小さくして背景の空気感を出す
人にフォーカスしすぎない
・MVと容量揃える
・左右の質量揃え裏、テキストと写真の色味を落として質量を揃える

気づき
・容量を揃えることでごちゃすかず、統一感
・ボタンの連続性は課題と指摘されているので制作する際にもお案じように連続してボタンを置かないよう注意。ボタンのタイプを少し変えてみるとかk変化つけるといいのかも

No.48地域に根差した信頼できる⻭科クリニックサイト

Pick Up👀
・同じ白でもコントラストに気を付ける、白を少し寝かせる
・クリエイティブの乖離
・MVのコピーよりその下の文章やフォントを出力を抑える
・MVの印象を合わせる（フォントや書体）

気づき
・引きで見て質量の確認大切。
・流行は一気に古くなる。最近では採用情報のところに動く複数の画像を配置してエンドレスに流れるあしらいなどをよく見かける…→程よい距離感と、デザインとの融和があればトレンドの活用はOK！！✍️

No.49イベント会場の設営・施工会社のHP

Pick Up👀
・ビジュアルが強いとコピーの入れ方が弱く負ける
・スタイルの分離、（MVがインパクト大きい場合下にもその要素エッセンスを〜ということか）
・MVのパーツを分解し密度を出す世界観をサンドイッチ
・写真の後ろにあしらいで出力を後押し

気づき
・紐付けの課題、デザインの勢い、前後の流れを俯瞰する
・あしらいがはみ出すことで緩急、背景のあいらいを設けること（赤い点々）統一感と緩急


No.50企業としての信頼感、環境事業のクリーンなイメージが伝わるサイト

Pick Up👀
・ボタンが浮いて見える、線で導く
・上にスクロールするなら上下にぼかし
・MVの１つのブロックとして見たいのに、（色が杯rと）分離して見える
・数字とか、細かいあしらいがあったほうがいい、シンプルな王道感容量もシンプルだともう同感の密度が弱まる

気づき
・各セクションごとに、印象的なロゴのあしらいが出現する。
くどくならず、かつワンパターンにならない表現。

No.51体操競技アスリート育成クラブサイト

Pick Up👀
・余白を意図的に設ける
・斜めのラインの上に、斜めの形の図形を差し込む際にはその角度にズレを生じないよう揃える
・レギュレーション揃える、（英語見出しと日本語みだし）
・フッターは上の重さを支えるほどにw幅をとる強度が欲しい
・背景に揺らぎを設けて→子供の可能性みたいな奥行きを出したい

気づき
・体操教室のダイナ1草や子供達の勢い感のある感じを→どっしり、優しく、力強いMVが印象的
・揺らぎというあしらいの表現でチェックバックされていた、ベタ塗りではないうっすらと味を出す演出に最適。

No.52クラスTシャツ制作会社サイト

Pick Up👀
・セクションに繋ぎ目はエッジをプラス
・色の連なりを出すためにK線のあしらいを追加
・レギュレーション揃える、（英語見出しと日本語みだし）
・MVの密度を散らす
・K線とあしらいの連動
・上下にK線をプラスすると文字が質量を纏う

気づき
・カラフルなサイトは出力の調整が肝心、どの部分を引き立たせるのか文脈を考慮して調整、詰まって見えないように。
・文字は質量を纏うことで情報を見やすく目立たせる📝


No.53企業の実像と変化、未来を伝え、採用者を感化させる戸建て住宅の設計・建築・販売を行う採用サイト

Pick Up👀
・個性の強い出力が強いとてんこ盛り感が出る
・文字も質量！前後の押し引きがあるとそれぞれの個性が立つ
・マクロ視点で進めている感、俯瞰して色を引く（黄色を引いて、黄色目立たす）
・存在感も抑えるところは抑える、黒が重いので少し濁らすのもワンポイント
・叙法量が多い場合、揃えるとことは揃える

気づき
・スタンスや求める人物像を伝えるコンセプト、コンテンツを設計。採用過程の就活生にとって、選考前や選考中など、どのフェーズで見ても企業理解や期待感に繋がるよう、情報を拡充しつつ、導線設計も充実させています。→採用サイトを制作する機会が多いので大いに参考に🔥

No.54合宿免許のワクワク感を伝えるサイト

Pick Up👀
・MV下のバナーが詰まりすぎて重なるバナーは要素が詰まって見える
・上部の密度が重く、中断で密度薄まる→（俯瞰大事！）
・Oでくりぬいたデザインの画像バランスは英字、数字のエレメントを追加してバランスを調整
・赤→黄の重ね合わせるとえぐいので他の渋めの青で代用。
・白が続くのでこのセクションは術式反転、白は強いからー使用頻度留意
・間を生かすための領域を出すために囲い、質量調整、均一化する

気づき
・18～22歳といった若めのtoCターゲットに親しんでもらえるようなサイト→デザイン自体はシンプルに設計し、イメージを伝える写真やイラストを多く設置いたしました。また、ユーザーの7割以上がスマートフォンユーザーのため、スマートフォンの表示の際にはユーザビリティに配慮し、CVボタンは下部に並べ、縦に長いコンテンツは開閉式
→新卒採用のターゲットと近い、意識する視点📝

No.55海鮮レストランのサイト

Pick Up👀
・MVは連続性のある展開なのでトーンを揃える
・K線のあしらい、バナーを揃える→の端が右下に配置されているがそこにK線はかけない

・MVの密度を散らす
・K線とあしらいの連動
・上下にK線をプラスすると文字が質量を纏う

気づき
・繋ぎ目は荒い和紙のような繋ぎ目の処理をしていて世界観が壊れない
・写真の選定も、メイン料理のほかに、焼く煮る蒸すあげる茹でるなどがわかる写真を設定している点にこだわりを感じる

繋ぎ目の処理で使われていた素材

No.56日本を代表する特許事務所の信頼感と対応力が伝わるサイト

Pick Up👀
・K線でコンテンツ幅を定義する
・背景に容量の設定で導く
・白場の色味を濁らす
・質量を均等に揃えるために、視線の振れ幅を極力抑える
・白の囲いを設けて、まとわせて視線を誘導

気づき
・フッターに使われるあしらい、存在感の多き、ボタンの形よりも、小さめのアイコンや、線などで処理する方法も時に必要今回はブロック感を排除している
・ブレンダーでの抽象的画のイラストが差し込まれている、ブレンダーすごいなあ一気にリッチに✨

No.57人・仕事・環境の3視点で、「ここでしかできない仕事」を伝えるサイト

Pick Up👀
・ボタンは離しすぎない
・「グラスレイヤー」であしらい揃える
・重力で引っ張る（色味を濃くする）
気づき
・FV以降の写真の配置の仕方で、MVのデザインを立たせることができる配置の意識
・印象に残りやすい赤をグレーに変えて落ち着かせる、結果個性ある赤のダイヤモより引き立つ

No.58経営 　経営改善・事業再生サイト

Pick Up👀
・写真の出力を綿で捉える
・流れができすぎているので視点を綿で留めるための処置（む、難しいな）
・あしらいの展開性
気づき
・デザインの今日強弱のバランスメリハリは、ボタンや要素のw幅、h幅の調整がかなめだなとも思った
・MVのロゴ周りの処理はロゴより目立たないように


No.59社会に仕事の誇りと憧れを届ける、高校生向けの採用サイト

Pick Up👀
・背景イラスト説明しすぎなのでグラフィックに振り切る
・斜めラインが多いので安定感が少ない。ゾーンプレス激しい。少なくしてレギュレーション整備
・MVのイラストの世界観とグラフィックを掛け合わせて抜け感を出す。

気づき
・事業のアウトラインをユーザー向けに整理し、まちの未来をつくり出す期待感を醸成するブランディング
・イラスト下のK線あえて揃えず背景露してのなじみを自然に

No.60幅広い情報をまとめ、想いを届けるブランディングサイト

Pick Up👀
・フォント種類、サイズ、設置箇所でベストを探る
・改行でバランスをとる
・質量の重さをとり、重さを出したし🆕
・背景色と、あしらいの色を微妙に変えて分離する

気づき
・MVに多くの人が映る、写真を配置するレイアウトやデザインはよく目にする。その場合、重くなってしまう懸念から上に投下した黒を乗せることが多いが今回の場合、この黒の出力を抑えることで全体のバランスがとれている！！👀

No.61保育園のコーポレートサイト

Pick Up👀
・写真を型取りする場合には形が欠けて見える場合もあるので注意
・やはりMapのデザインとしての調整は大切→本番ではなくなっている
・MVのあしらい、文字の置き方を似せて下部のデザインを施す
・背景色と、あしらいの色を微妙に変えて分離する

気づき
・上位概念に立ち戻る。普遍的な価値にもう一歩踏み込む・・
こんなCB頂いたら自分ならどうするのか。というかこのようなCBがくる環境凄すぎるな、対応できるデザイナーさんも。
結果、画面固定でぴょんぴょん上にスライドしていくデザイン胃なっていて雰囲気も素敵なサイトに✨

No.62出版文化を支えるクライアントのブランド力を高めるコーポレートサイト

Pick Up👀
・本の肌触り物質的な肌ざわり
・上段→集客要素強い　中下段と対立
・MVのあしらい、文字の置き方を似せて下部のデザインを施す
・繋ぎ目世界観のギャップがあるのでスタイル調整

気づき
・MVが写真一面だと固い印象から、風が吹き抜ける感じの印象になっていてすごく風落としの良い


No.63やさしく浸透していく導線設計のIPO支援やM&A支援サービスのコーポレートサイト

Pick Up👀
・エッジ抑える（エッジたちすぎると安っぽく見える）
・イラストとの連続性
・文字も質量、改行もバランス
・コンテンツの分離を抑え、上の引力に引っ張れる感じでコンテンツの分離を避ける。

気づき
・コンテンツの内容が補助の役割かどうか見極めて、その部分が仕切るべきかどうか、、区切りを設けるか検討する。

No.64人と未来に寄り添う「くらし空間」の提供を想起させる商業施設を中心とした空間創造を幅広く手がける総合建設企業コーポレートサイト

Pick Up👀
・明るい色で、明るい印象を出すとコーポレートの重さがなくなってします。
・情報を楽しく伝える→イラスト配置
・文字量、増える可能性ある時、考慮する。
・MVのイラスト、リアルと致との共存、調和。仮想空間とリアルの共存。


気づき
・セクション内でいい感じに、安定した散らばったデザインをしようと思うと、締めるなくてはならないい部分でふわっとしないように注意が必要。
・MVの近くにボタンがある場合に、そのボタンの色が濃いと印象を引っ張ってしまうことも（磁場が生まれる）。

No.65幅広い情報をまとめ、想いを届けるブランディングサイト

Pick Up👀
・四角固いので、K線で仕切る。
・ベタめんのあしらいが中途半端なので、見せるものは見せる
・MV面のあしらい、展開性を出す。

気づき
・枠線な以外で、、被せてのせるフォントのあしらいのおきかあt、オレンジ色が立つので、枠内外で変化をつけるこれだけで
同じお着物も別のものに！

No.66階段昇格機の紹介サイト

Pick Up👀
・色味の出力が同じだと、要素が多く見える。
・写真→特定職域、色の調整。トーン落とす。
・着地萎まない
・ベタ面をもう少し薄く、訴求はできているが、意味になりすぎないように。色に頼らない。

気づき
・色＝意味になりすぎな異様に、色に頼らないはすごい。個人的にパワーワードでした…
・MV色がのペーと作ってしまいがちなので、要素を多く見せないためにもメリハリ大切に📝


No.67グループの「存在意義」と「約束」が伝わるサイト

Pick Up👀
・半円のMV、情報のシワ寄せ
・行間は全体の雰囲気で絞る
・丸の中はデザインの中でも山場、容量のばらつき、「ドン！」とした質量欲しい
・あしらいで、流れを作る、糸のない余白は埋める。

気づき
・半円は何かと使いたいと思ってっも、ツィな決めのあしらいや、中のコンテンツの配置に悩む。
・写真の3枚がデザインとして出る時には、左右の色、真ん中の軸になる色を決める。
・コンセプトやテキストを際立たせるために、シンプルなボタン

No.68商業建設の先駆者の姿を、「これまで」と「これから」で表現

Pick Up👀
・グラデで背景と馴染ませる
・横顔を考える（👀！！）
・レイヤー構造の意味付け

気づき
・視線の流れを揃えるために、ずらした写真の配置と説明文の設計は注意が必要。ずれ幅はおおきくなりすぎずに。
・写真に被せる色は濃すぎるの注意、やりがちなのでデザインによっては寝かせること意識する！

No.69安定・安心できる環境で、熱意をもって働けることが伝わる採用サイト

Pick Up👀
・MVと連続性のあるあしらい
・構造の前後関係を意識する、今回の場合はバナー写真はシャドウ入れて浮いてる感演出。
・あしらいも、遠くのもの近くのもので色に反映して距離をデザインする

気づき
・デザインの際、揃える、勤労にはみ出すなどルールをはっきりさせ確立っすることが大切。
・インアタビューの横に渡る写真を端に見立てて、流れる川のイメージで、あしらいを通す感じがなるほどな！感覚的にわかりやすい☺️

No.70スマートかつ洗練された印象が伝わるサイト

Pick Up👀
・サービス名は唐突に目立たせすぎない
・余白で関連出して、連なりができる
・あしらいも、遠くのもの近くのもので色に反映して距離をデザインする

気づき
・モノトーンに、ワンポインんとのブルーが生える、クールかつスマートなデザイン
・文字の置き方一つで駄作も見えてしまうが、英語と、日本語使い分け、データのあしらいに頼りすぎず。」モノクロ写真や、透かしたり、要素を重ねて区切りを滑らかにするなど丁寧に組み立てられている。


No.71最高品質のスポーツ施設を提供できる強みを訴求するサイト

Pick Up👀
・グラデが濃すぎると骨太感
・画像の出力がつよいので、あしらいなるべく削る
・ベタ塗りではなく、線で繊細に仕切る
・繋ぎ目のギャップを抑えた

気づき
・余韻で色を感じさせる！
・写真が並ぶ時、どの写真の質量で揃えるか基準を設ける視点はトテモ学びになりました📝


No.72相続問題の悩みを相談できる安心感を与えるサイト

Pick Up👀
・白の出力で、重心の調整
・写真のあしらいいきなりかとんまな変わった感。イラストで重力散らす。
・QAの出現の仕方ユニーク、相続という思い内容にも親しみのあるイラストでデザインすることでハードルを低く。

気づき
・リッチにするポイントが際立たないと、間抜けな印象になりがち。
・初稿では青が多い印象だが最終的には青みのグレーにして抑える。


No.73インパクトと信頼感でイベントへの期待値を最大化し、ファン化に繋げるサイト

Pick Up👀
・セクションにリズムが欲しい
・見出しのキャッチ感を立てる
・下にも展開できるアプローチ
・トーンを揃えることで、色の出力がまならになるので色の統一していいかも。

気づき
・掲載いされている、チャックバックから最終形態までまた変わっているデザインなのでその後にも何度もやり取りがあったんだろうな、TOPだけでも何往復も、よりインパクトが出たあしらいとワクワク感がフォントなどから伝わる！


No.74誠実さと熱意、プラントの定期メンテナンス事業コーポレートサイト

Pick Up👀
・採用サイトのあしらいを参考に
・レイアウト大味
・写真はグラデを入れて馴染ませる
・写真、パース垂直調整

気づき
・出力は前に押し出される力のようなもので..太鼓のようにリズムが存在する。縦軸ではリズムも文脈→言葉の意味改めて出力やリズム大切にする。


No.75 はつらつ！優しさ溢れる飲食店サイト

Pick Up👀
・FVの鑑賞性には耐えられないかも
・配色の設計、グラスレイヤーだとえぐみ、コーポレートとしての立ち振る舞いのブレが生じる。
・LVはH幅を出してバランスを整える。
・要素に詰まり感あり、MV下の武家感を考慮してH幅調整

気づき
・MVの写真のクオリティはサイトの印象そのもの、鑑賞性注意！
・コーポレートの立ち振る舞い、か、採用サイトとは別にコーポレートも作ることはある、その会社、理念、立ち振る舞いに意識する📝

No.76高い技術力を生かし、環境への配慮が感じられるサイト

Pick Up👀
・下のセクションへの距離感を縮める
・シンプルだけど、密度ほしい
・イラストが出力強いので、衝突感

気づき
・シンプルかつ緩利もある洗礼されたデザイン。ボタンの出力の強さや、シンプルでも情報の密度を高める場所、視線の誘導を意識してイラストも配置。ロゴをくり抜き、色もの調整もアクセントになっていて素敵だなあ
・写真のパース調整は忘れずに！

No.77公益法人に強い税理士の集客LP

Pick Up👀
・FVの色の出力を抑えて、視線をイラストに落としたい。
・出力が大きすぎると、吹き溜まりになる
・シャドウをつけて、前後の奥行き出したい
・K線繋げなくていいかも

気づき
・長いLPになると、背景色のルールを揃えてバランスを取る。
・安心して相談できるということを柔らかいトーンの色で、優しい雰囲気をもたらすデザイン

No.78先進性と親しみやすさを両立し、企業理念を伝えるサイト

Pick Up👀
・セクションを区切る写真セクション分離の要因
・フッターの窮屈さはH幅出す
・LVはMVと対比してあしらいを集約
・図とボタンのUIに一体感があると良い

気づき
・物流の迅速さ、物の循環、そして物を通じた人々の生活や社会の結びつきを象徴する曲線をデザイン→あしらいのいと、背景をしり、業界、職種の理解をデザインに落とし込むこと、難しいけどそれがあってこそ訪問者に届くデザインになる📝

No.79環境工学という難しそうなイメージを払拭する研究室サイト

Pick Up👀
・繊細な印象を崩さないようにウェイトを落とす
・上のとんまなを応用してK線で軽さを演出
・LVはMVと対比してあしらいを集約
・図とボタンのUIに一体感があると良い

気づき
・MVのイラスト、半円、角丸の藍sらいにイラストが組み込まれているデザインが目を引く、素敵なあしらい、かつ、背景のテクスチャーが雰囲気を醸し出していて、テクスチャーは組み合わせ方で見せ方も変わる。

No.80継続的に通いたいと思ってもらえる地域に根差した歯科医院サイト

Pick Up👀
・色べた、予約ボタンをかぶる。予約からーが目立つように配慮する
・コンテンツと画像のかかり具合比率がバラバラなので揃える
・フッターには揺らぎを追加
・図とボタンのUIに一体感があると良い

気づき
・PC版の予約ボタンの、スルスル出て来る動き、面白い！
・要素の密度、上げるところが上げるアイコンなどで質量調整。

No.81企業理念と事業内容を明示化し、信頼性が訴求できるコーポレートサイト

Pick Up👀
・パキッとかんはダイナミックさ、ぼかすと優しい表現に
・ボタンの存在感が強い

気づき
・フッターの繋ぎ目処理が最終的には、鮮やかなっ写真を活かしたデザインに！大胆で悠々としていて素敵、リクルートもあわせて目にとまる！採用強化も目的に入れているということでかなり視覚的効果増！
・ブルー→グリーンの印象にチェンジ！


No.82笑顔になれる家づくりを届けるサイトサイト

Pick Up👀
・レイアウト揃える
・MVの風のあしらい根拠の言語化、風だけだと弱い→家を建築・リフォームすることで生活の雰囲気が変わり「新しい風が吹く」ことをコンセプトにデザインを作成
・文頭揃える

気づき
・ユーザーがサービスとどこで接点を持つのかということを知っておかなければならない。どのように利用し、それによってライフスタイルがどのように変化し、どんな実感が育まれるのかという点を明確に示せるかが重要→サービスの理解を　深めたデザインが鍵となる🔑📝
・暮らしのイメージを伝える写真を多く取り入れたデザイン

No.83明るく前向きな印象で、働く原動力を伝えるサイト

Pick Up👀
・レイアウトコンテンツ幅縮まった時考慮する
・ぼかしはおしゃれだが、縦軸で見るとノイズに
・写真の容量設定が大味なのでスタイル再考
・MVのトリミングを応用サンドイッチ！🥪（割と出てくる大事な視点‼︎）

気づき
・ワイヤーフレーム（魂）から拝見できたデザイン。メージは伝えなきゃいけないけど、伝えすぎもよくないとのこと。確かに‼︎
・転職後の明るい自分を思い描けるよう、楽しく働いている様子→笑顔と、イラスト、職場の雰囲気、温もりのあるデザインからイメージ想起

No.84全てのビジネスに新機軸を創るコンサルティングを駆動するサイト

Pick Up👀
・ボタンが浮いている印象→塗りをなくし、クリアに！
・上はいいけど　、下の出力、質量、メリハリない
・出力が前に出過ぎて被写体でかい、色味のエッジが立つのでMVと連なりを出したい→色味レイヤー、画像を引く、H幅抑える

気づき
・白黒ベースの配色でプロフェッショナルの演出を心掛け知的でクールに→作図１つから印象形成する,無駄のない洗礼されたデザイン
・MVの連なりや、印象はかなり大事だ、サイトの印象、そのん下のデザイン、質量左右する

No.85テーマを切り口に信頼を獲得し、集客に繋げるサイト

Pick Up👀
・色の締めどころがほしい
・容量設定、定義哲学が足りていない
・ナビが説明的すぎるのでもう少し繊細に
・全体の色はMVの流れが分断しないように薄いカラーが良い
・容量に色を付与する

気づき
・直線的なレイアウトと透き通った佇まいで、堅実な印象をもたせつつ...曲線的なあしらい、ほのかに滲んだグラデーションで柔らかな印象を演出。柔と剛の両立
・ターゲットが抱える課題をプロによって解決する期待値を高める一方で、親身で丁寧な姿勢も表現→この戦略、方向性の背景大変参考に　
なります。プレゼンス流ときにもこの前提を正しく垂れられるかが物づごく大切。

No.86テーマを切り口に信頼を獲得し、集客に繋げるサイト

Pick Up👀
・メインの印象を持続させる→息継ぎポイントを設計する→もう少し、骨太で明るい印象に
・あしらいの展開を揃える、ルールのブレをなくす
・着地の安定感が欲しい
・ロゴ展開しすぎも良くない、個性と履き違えない
・上のコンテンツを少し支えたい（K線の長さ）

気づき
・スタイルが唐突すぎるとそれは違和感になる、普通が一番難しい。
スペースを均等に、周囲の要素との考慮しながら配置。
・フッターはデザイナーが思っているよりも多めに取る意識が大切そうだ（H幅指摘されているのよく見る） 

No.86株式会社として学校を運営する先駆者としての信頼感を伝えるサイト

Pick Up👀
・K線あると雑味
・アイコンとボタンの相性悪い、左揃えにしてボタンと距離を保つ
・ボタンK線にフォーカスされるので申し越し、繊細に

気づき
・あしらいとボタンの関係など、ボタンもデザインの一部、むしろアクセント。置き方、デザインポイント。揃える！
・英字の位置調整、かかり具合を揃えることも意識する！

No.87企業の魅力を伝えるとともに、快適空間を提供する想いを示したサイト

Pick Up👀
・ベタ塗りお知らせ→大味、K線、透過で
・アイコンとボタンの相性悪い、左揃えにしてボタンと距離を保つ
・このエリアが何を示しているのか
気づき
・マージンの緊張感、MV下のマージンを踏襲したりなど、マージンの置き方忘れずに何気なく、なんとなくで置きがちなので。。。
・会社あんないのアイコン化してそれぞれをわかりやすく、どの内容が入っているのか丁寧に簡潔に伝えている、素敵！

No.88物流施設開発の施主代行を行う独自性を伝え、新しい利益につながると予感させるサイト

Pick Up👀
・作図の出力挙げて流れにメリハリを
・イラストを散らしすぎない（資産の誘導、空いたスペース埋める感じにしない、置きにいかない）
・こMV左だけ下手だと視線がよるので全体面で押し出す
気づき
・ロゴとの関連性を出すことおは大事なアクセントに！
イラストは、スペースを埋める×のではなく、やたらとおかずに意味を持って配置する。

No.89プロらしさとフランクさを持つ、企業の特長を表現したサイト

Pick Up👀
・MVのフォント色を纏う
・and more ユーザーが迷う情報は入れない
・色濃くしてサイトの腰にする

気づき
・クリアな印象のあるデザイン、ロゴの色が踏襲されている！この波紋はどんな意味があるのかと調べると→心の壁のない環境で、お互いが影響しあう流れを、柔らかに反響する波紋のカタチで表現しています。
（小説のような、美しい表現が出てきて驚きと感動。）

No.90再生治療で豊かな人生を取り戻す未来を感じさせるサイト

Pick Up👀
・MV要素が多いのでグルーピング整理
・濃い色の出力すると売りやりしめている感が出るぼやかす
・背景にはざらつきあるテクスチャで手触り感

気づき
・背景に置きすぎると、忙しい感が出てしまうこともあるので注意する。
・安心と納得感、前向きになることを意識されたデザイン、優しいグラデや落ち着いた写真、イラストを取り入れることで感じる。

No.91豊かな冒険が、子どもの可能性を広げると感じられるサイト

Pick Up👀
・繋ぎ目の課題感
・色の定義を無理にしない→１色で統一
・言葉との釣り合いを出していいかも→ドーンと表示
・軽く領域定義

気づき
・色の印象は剛ギタリ、ボタンと同じ色になりすぎないように、中和して調整する。
・追体験【他人の体験を作品などを通して自分の体験として捉えることです】
・最終的にサイトの下にいくとパースかん強めのスライダー写真でワクワク冒険感あるサイトにそったデザインになっていました👀

No.92ビオラの花言葉のように、誠実に患者と向き合う姿勢を表現したサイト

Pick Up👀
・出力の反転、色を付与しすぎない
・フォントのメリハリつけすぎない
・写真のレイアウト、構造エオサンドイッチ🥪
・装飾しすぎも良くない、重心を白べたで安定させる→視線を流さない

気づき
・固さをとる。って意味がいまいち分かり切っていませんが、
フォントがイカ書だけ、アーチ型になっている箇所にに対して孤独にしない、というCB。💭ワンんポイントで〜動きをつけたい、目立つよね⭐️って思いて私なら置いてしまいそうだけれど、浮いてしまうということですね…きをつけよう(~_~;)

No.93学校行事の写真・動画撮影を手がけるサービスサイト

Pick Up👀
・早めに印象づけるもの、上に
・MAPふにゃふにゃ、骨がない
・繋ぎ目、申し越しゆったりな印象につなげたい
・写真ののっぺり感は、白シャドウだけでなく、背景カラーで囲って、前後関係をハッキリ

気づき
・色味がねむので、パキッとさせる。写真使いすぎてこまぅたら写真！のようになってくどくしない。

No.94質の高い検査と治療が受けられると想起させるサイト

Pick Up👀
・音のリズム（！！👀言われてみると分かる）調律揃える
・Topに来る言葉が、下のコンテンツ群を吸引するとよう、少し下をつめる
・上の展開を横軸で応用する

気づき
・優しい色味での心地よさ、ブラウンも重くなりすぎず清潔感立地感を醸成
ブラウン、水色との相性イイナ✨👀

No.95受託専業メーカーの「モノ創り」で、化学産業の未来を拓く姿勢を示すサイト

Pick Up👀
・K線フォントにすると、ユーモアが出すぎる
・表現をしぼる、要素が多いため
・出力のメリハリ、H幅をどちらか拡張する
・色パターン検証

気づき
・ロゴマークの爽やかな青をアクセント,横スクロールやホバーアニメーションなどで、柔く、トレンド感
・デザインに、蓋然性（がいぜんせい）→ある物事や事象が実現するか否か、または知識が確実かどうかの度合いのことである。を重視する。
バランスより蓋然性って、新しい知識すぎてﾏﾌﾞｼｲ😣

No.96人と人とのつながりを大切にし、笑顔を届ける姿勢を表現サイト

Pick Up👀
・要素が散っているのでここは流れに蓋をする
・MVと対比構造に、ここは左側を開ける
・色べたどちらか締める（濃くする）
・H幅をもうすこぢコンパクトにしいぇ白の余韻をひきたい

気づき
・ナチュラルでナチュラルな手作りの風合いがとても素敵なデザイン
・スクエアサイズのバナーも雰囲気に合っている🙆‍♀️

No.97自己の成長意欲が、人々の幸せへとつながることを表現したサイト

Pick Up👀
・MV要素に視線がフォーカスするので出力を抑えたい
・無理にスタイリングしようろせずどセンターでわかりやすく
・情報の整理、無理やり改行など見辛くならないように
・ボタンの印象にブレあり、サイズが違くても比率を維持する！

気づき
・「熱意を優しさで包むデザイン」を目指しました。→熱量を優しくパッケージするイメージ
人を大切にする姿勢や従業員の成長を柔らかいグラデーションで伝え、
能動的に仕事ができる環境、やりがいにコミットする強みを、静かに熱く表現しています。→静かと暑くを完璧に言語化、カスロゴの印象、カラーも投手しつつ、会社のカルチャーと強みをデザインに落とし込む
丸みの背景・タイトルの線のあしらいで成長が人の幸せに繋がる「連鎖」や「広がり」を表しました。→幸福の広がり、成長の広がり
・無理やりのスタイリングは苦しく、伝わる


No.98 AI業界を牽引していく、強い使命を表現したサイト

Pick Up👀
・ボタンの丸みは眠い印象
・アローが次にステップと被るので、位置とモーションを検討
・情報の整理、無理やり改行など見辛くならないように
・ボタン全体的にシャープに指定ので英字大文字でおいていいかも

気づき
・ピード感を線の集合と面で表現、頼もしさや信頼感は、どしっと感ある要素も欲しい→ボタンや英字の見出し、ウェイトなどからも感じられる。
・私たちの特徴の部分は、前面に写真を大胆に使い、ホバーで詳細表示おしゃれかつ迫力あるデザイン。採用ページもブラウンとアクセントのピンクのあしらいが特徴的な下層ページ

No.99 企業のらしさを示し、食を創造する喜びが感じられるサイト

Pick Up👀
・色が淀んで見える
・イラストの線の太さ揃える、大きさで印象がブレないように
・下に固さがたまっているので和らげたい
・フッターワイドにはる

気づき
・なぜ青と緑を組み合わせているのか疑問だったが、陸と海を表現している。多彩な食材に携わるワクワク感
・自然の恵みを食卓に届ける→柔らかい曲線で表現。


No.１００ (Webサイトチェックバックが尽きたので…）M-HANDの仕組み図解

Pick Up👀
・質量揃える
・背景の色味が影響して、色味がブレるので
・グラデ濃くて弾きでみると目立つ、全体薄く、グラデ部分は薄く
・ボタン全体的にシャープに指定ので英字大文字でおいていいかも

気づき
・Webではなくても、超俯瞰して見ることはとても大切。骨格を見てバランス、構造の不自然さを除いていく。
・不要なものを排除していく、排除する要素がなくなることより良い選択をできるように


Pick Up👀
・K線、線を掠らせて馴染ませる
・密度上げつつ情報を洗礼させたい
・出力に押し引きがない、このエリアは引く
・MVのイメージでこのバナー作る🥪
気づき
・ギャップを自然にする、明暗のサンドイッチも忘れず！


んんーすごい、この学び無駄にせず仕事に生かしていきます🫡
最後まで見ていただいた方、もし、いらっしゃいましたらスクロール量とんでもない中ありがとうございます🌷

またお会いできたら嬉しいです🎀🍰

































いいなと思ったら応援しよう！