ウェブデザインの進め方

ウェブデザインの進め方

まともな個人プロジェクトを作ったことがなかったので、 作りながらいろいろ整理していこうの一環で、自分用の適当メモみたいなもの
ちょっと用語とかも怪しいので、ちょうどいい単語がパッと浮かんで来なければ適当な言葉で濁しちゃう

範囲の想定

どんなものを作りたいかはある程度はっきり設計できている状態から、コーディングの前まで

やることを整理

決めること

  • ページのレイアウト

とかとか

やること(作業)

順番にすすめていく

まず下書き

細かい装飾とかは置いといて、適当に思いつくところから書いていく
最初から考え込むより、とにかく量書いてからイメージ合わせてくほうが結果近道な気がしてるので、どんなページが必要で、どんなコンポーネントが必要かある程度わかってれば適当に書いて並べていく

iPadApple Pencilで、Conceptsを使って適当に書いていった

concepts.app

めっちゃ使いやすくて気に入ったので有料プランにした
無料だと、たしか細かいコピペとかサイズ変更とか移動とかできなかったと思う

最初からPC上でポチポチ形を作っていくのは、たぶん慣れてないとかなりしんどいし、時間がかかる
紙にペンで書くでも良いと思うけど、デジタルだとコピペもサイズ調整もやり直しも一瞬でできるのでおすすめ

注意点

ものの大きさに注意
デスクトップって結構広い
サイズ感が違うと、実際に作ったときの噛み合わなさっていうのが出てくると思うから、適当なウェブページでも開いて、

  • アイコンならこれくらいの大きさかな
  • 検索バーはこれくらいの幅かな

とかをちょくちょく確認したほうが良さそう

下書きをレスポンシブにしていく

書いた下書きを、軽くレスポンシブにしてみる
ここでもサイズ感を気にしておく

デスクトップが先かスマホが先か、どっちが良いかはまだわかってない

この段階はすでに片方が大体できてるので、適当にコピペなり脳内補完なりするとわりとすぐ終わる気がしてる

ワイヤーフレーム作る

Figma使った

www.figma.com

なにか深い理由があってFigma選んだわけじゃなくて、前から使いたかったから
FigmaとかSketchとかXDとかいろいろ調べてて、なんとなくこれかなあとFigma選んだ

コンポーネントは後から

よくこういう系でコンポーネントたくさん作っちゃいたくなるけど、とりあえずページ作ってみて、後から適当にポチポチコンポーネントに変換でも良いと思う

最初にコンポーネントたくさん作っても、実際には使わないものがあったり、組み合わせてみると違和感があったりで無駄がいろいろ出る気がするので(もしかしたら気がするだけかもしれない)

とにかくまずページを作ってみるを優先したほうが良いかなと思ってる

個人のプロジェクトなら特にそうだけど、ユーザーから見えないところですんごい頑張っても「時間もったいなかったね」ってなることが多い気がする

もちろん趣味でやってるならやりたいことやればいいし〜〜とかいろいろ思うことはあるけど、今回はコンポーネントは後回し

色も後回し

上と同じで、とにかく決まってることをバッと進めたほうが良いとおもう

色は組み合わせとかいろいろあるし、実際のUIに当てはめてみないとわからないことだったりあると思うので、いったん後回し

ここらへんから先はまだなのでここまで