サイトトレース

本

運営しているクリエイター: en

グラフィックトレース（2022.02.28）

今週はグラフィックのトレースをしてみました。というのも、会社でウェブサイトよりもピンタレストとかに載っている複雑な図をトレースした方がいいという話になったからです。会社からグラフィックのトレース課題を出してもらったので作ってみました。基本は円を重ねれば出来ますが、右下だけはパスファインダーで合体させてます。この白い縦線が集まった円は作り方が分からなかったのですが、調べてみると線を一本描いて、回転ツールで角度を指定して複製するだけですごい簡単でした。ブレンド

サイトトレース（2022.02.13）

トレースしたデザイン気づいたこと※以下の数値は画面サイズ1366pxで見た時のもの・左上の一番外側の余白と各テキスト間の余白は2倍になっている。・テキストは縦軸センターから120px左の位置に配置。一文が長く、センターに置くと右に寄って見えるため左にずらすことでバランスを取っているのではないか。・一番最後の「いこう、その先へ」と上のテキストとのジャンプ率は1.8倍。・背景の英語はSVG。・「クリエイティブパートナー事業」は上が3カラム、下の「雇用形態」は4

サイトトレース（2022.01.23）

トレースしたデザイン気づいたことサイトはコンテンツが2カラムで構成されており、その横に縦型のメニューが設置されている。各要素の余白が狭く、文字や写真が敷き詰められているにも関わらず、圧迫感や淡々とした印象を感じない。コンテンツの上部は画像、下部はテキストの割合が多い。「あそぶ」では画像の上に見出しやタグを設置し、情報を画像一枚に集約することですっきりした見せ方になっている。画像をメインにした見せ方にすることで、テキストばかりでごちゃごちゃしないように全体のバランスを取って

サイトトレース（2022.01.30）

トレースしたデザイン気づいたことフッターは普通のメニューを左、「Request demo」「Contact」のCTAを右に配置し情報を分けており、画面中央に近いCTAの方が目に留まりやすくなっている。フォントサイズを大きくしたり装飾を施さなくてもレイアウトを工夫することで目立たせられることがわかった。ヘッダーでは「Contact」の導線は格納されており「demo」だけ目立つ形で配置されている。いきなり問い合わせする確率が低いためハードルの低いdemoだけを配置している。

サイトトレース（2022.02.06）

トレースしたデザイン気づいたことスクロールボタンを黒にしてみるとすごく重たくなってしまう。ロゴやコピーよりも目立ってしまい情報の優先度が崩れるなと感じた。（赤より黒の方が背景の白に対してのコントラストが強いため、黒の方が目立ってしまうのではないか）また、赤色といっても彩度・明度がかなり高いためそこまで重くならないのかなと思った。スクロールボタンを右に置くと逆に左の余白が目立ってしまう→余白のバランスを取るために左に設置されている。画像の比率は白銀比。美しく見え

サイトトレース（2022.01.10）

トレースしたデザイン気づいたことMVの画角はヘッダーに高さがあったり、下にニュースのエリアがあることによりあまり広く取られていないが圧迫感を感じない。右側に半円があることでヘッダーとニュースとの境目が曖昧になり抜けができているため、画面に広がりを感じるのだなと思った。また半円の上にコピーが載っているのも画像と白い部分に繋がりを感じる要因となっている。ピックアップニュースの記事の下のバーが記事よりも左に配置されているが、これは記事をドラッグした時に画面全体に記事が並ぶため画

サイトトレース（2022.01.16）

気づいたこと情報の整理の仕方についてFVは最初に「いきつけからはじまる地域のお仕事・お手伝い」というサブコピーが目に入り、その後にメインコピーである「いきつけいなか」が目に留まる。フォントサイズが大きいメインコピーよりもサブコピーの方が目につきやすいのは、人は動きのあるものに目が行きやすいため、スライドが設置してある左側に注目が集まるからだなと思った。最初にサイトの内容を説明しているサブコピーから見ることでどんなサイトかすぐに理解できていいなと感じた。目立たせたい