サイトトレース(02)│ベネッセのDX戦略

Webデザイナーを目指し学習中のkinomiです。

転職活動一旦お休みして、去年から放置していた部屋の片づけに手を付け始めています。

そんな感じで時間空いちゃった、、。
サイトトレース完成したので記録していきます。

サイトの選定理由、考察、トレースの方法は【サイトトレース(01)│ベネッセのDX戦略】と同じ内容です。

見本としたサイト ↓

ベネッセのDX戦略 | ベネッセグループ

サイトトレース(01)│ベネッセのDX戦略 ↓

サイトの選定理由

□ 秀逸なWebサイトをまとめたサイトで多く取り上げられていた。
□ 余白・変形されたフォント・シェイプが多くありトレースの訓練になると思った。

考察

テーマ : 事業やサービスにおけるデジタルの活用
コンセプト : 一人ひとりが、より「よく生きる」ためのDX

□ アクセントカラーは彩度高めの色を４色使用し、明るい未来を連想させ、コンセプトと合っている。
□ 幼児・学生・ビジネスマン等様々な年齢や職種の人物写真を多く配置することで、幅広いユーザーへのサービス展開をアピールしている。
□ グラデーションのような背景のアニメーションがテーマと合っている。
□ スクロールやマウスホバーによって人物の写真が切り替わる / テクノロジーを感じさせるテクスチャが出てくるなどテーマに合わせたアニメーションがついている。

トレースの方法

使用ツール : Figma

□ サイトは横に置かずにその都度サイトを開きながらトレース。
□ 検証ツールで細かなルールを確認。
・配色 / 余白 / フォント(サイズ / 行間 / 文字間)・写真のサイズ。
□ 画像はフリー素材から選ぶ。
□ シェイプはツールで作成。

トレース(後半)

トレース(全体)

やったこと

□ 写真
・Figmaで写真加工のプラグイン【Filter】を導入。
Photoshopのようなトーンカーブの加工ができて、加工を保存して他の写真に適用出来て便利。

□ 右下の角だけ切り取られた図形
・切り取りたい分の図形を重ねる→一括選択→選択範囲の切りとり

□ 複雑な図形
・illustratorで加工。グラデーションとぼかし(ガウス)フィルター

感想

　hoverとスクロールに合わせたアニメーションは、デザインの時点で考えられているものだーと思いました。
　写真を小さい四角で分割して配置し、アニメーションで分散させる…というのがDXを表現するアニメーションでかっこいい。

グレーの汎用性の高さ

グレーを上手く使い分けるとデザインが上手くなる、と聞いたことがありましたが、最近ひしひしと感じております。
トレースして使いどころが少しずつ分かってきた気がする。

見えない線

それから、見えない線を意識したレイアウトは今後の自分の課題です。
このサイトでも、実際に線は引かれていないけど、整頓させることにより「見えない線」が見えてくる、らしい。

最近ノンデザイナーズ・デザインブックと、小林章さんのフォントについての書籍を購入しました。
正確な知識を定着させるため、PC触らない時間を作って書籍を読む時間を作っております。

知識を定着させるには、
書籍を読む→文字起こししてアウトプット
の流れがいいそうで。(アウトプットの汎用性高すぎw）

電子は目が痛くなるのと、馴染みがあるから本当は書籍が好き…なのですが、紙の書籍より、電子書籍(kindle)の方がブログ感覚で読めて、アウトプットもしやすいそうです。

ノンデザイナーズ・デザインブックはkindleで買ったヨ。
アウトプットするヨ。

Figmaのローカルスタイル、プラグイン、ショートカット少しずつ使えるようになってきた

最初調べるのに時間はかかるけど、覚えたあとは少しずつ作業が早くなってきています！調べると情報量超多いので、マイペースにひとつずつね。

今度Figmaで覚えたことnoteにまとめます。またね～

kinomi