0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ChimrinAdvent Calendar 2024

Day 5

デザインコンセプトを決めたい

Posted at

はじめに

サイト開発をデザインからチャレンジしてみたい!第2弾の記事。

最初は、ムードボードにチャレンジしてみた。
本来であればもっと情報を細かく列挙して検討・整理するものだと思うけれど、
今回は、初挑戦かつ全体的な概要をつかみたいので、大まかに(?)デザインの流れを体験してみる。

デザインコンセプトを考える

今日は参考となるデザインを収集してみる。

前にデザイナーさんと雑談していたときに、「Pinterestとかでデザインのイメージを教えてほしい」と言われたのをふと思い出したので、Pinterestで情報収集にチャレンジしてみる💡

(っ'ヮ'c)< なにこれ見てるだけで楽しくて保存する手が止まらない・・・!

すべてが素敵すぎて保存する手が止まらないし、ずっと見ていられる。
でもこれすっごく難しいな、、、

気に入ったものを何個かピンしてみた
image.png

今回は私のプロフィールアイコンと同じ8bitっぽく宇宙感のある(?)雰囲気にしていきたいと思う。

レイアウトを考える

まずは、Figmaを使ってワイヤーフレームをこんな感じで考えてみた。
見やすさに不安は残るが、一旦このレイアウトで実装してみたいと思う。

トップページは、左ペインにプロフィールを表示して、右ペインをカード形式で記事のリンクを表示するイメージする。PCメインで考えるので、SPは後回しにする。

image.png

記事ページはこんな感じ。
左にカテゴリを表示して、右はサムネイル(MV)と本文の予定。
トップも記事のページも右ペインだけ、スクロールできるイメージ。

image.png

自分で作った後に気づいたけど、RSS Readerと同じようなレイアウトだから意外と見やすいかもしれない💡
マージンとかは、あまり気にして作っていないので、のちに調整する。

まとめ

今日は、Pinterestで参考となるデザインの収集とワイヤーフレームまで検討してみた。
Pinterestで情報収集したり、色を検討したりするの慣れなくてすごく難しい。
見る人に与える印象や、見やすさ・アクセシビリティとか考えること色々あって勉強になる。

明日は実際のデザインに取りかかる予定!
(金曜なのでいっぱいがんばれそう😊!)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?