デザイン

スキル0の初心者だけど独学でウェブサイト制作がしたい!:ラフから仕様書作成まで

スキル0からのウェブサイト制作

オンラインプログラミング学習サービスの「Progate」を頼りにしながら、自分のポートフォリオサイトを作っていきます!

Progateとは?

初心者から、創れる人を生み出す

を掲げ、世界一わかりやすく、楽しいプログラミング環境を提供しているオンラインプログラミング学習サービスです。

私も最近、Webデザイナーへ転職する際に、このサイトを利用し始め、現在も愛用しているサービスです。

ゆっくりやってます

プログラミング初心者さんに対して、必ずと言っていいほどおすすめされているサービスの一つですが、やって損のないものだと確信しています。

Progate

まずはざっくりラフ作成

サイトラフ案

線がふにゃふにゃだ…

公開するつもりならもっとちゃんと書けばよかったww

ラフの段階で考えていたのは、

デザイナーのポートフォリオサイトを作るなら、

作品メインになるだろう、画像を大きく扱ったり、たくさん見せれるように配置したり、同じサムネイルがずらっと並んでるのは、Instagramみたいで気持ちよさそう。

1カラムがいいのかな?ブログと同じように2カラムにしてナビゲーションをスムーズにしていくべきかな?

と色々悩みました。

結果、まずは1カラムの余計な装飾がないものを作り上げよう!ということになりシンプルな構成になりました。

ナユミ
ナユミ

要件定義…?

自分自身のサイトでも、そこから考えたサイト作りをしていった方がよかったのかも…?

いざワイヤーフレーム

と思いきや、ラフ案から即カンプに移行してしまったため、ワイヤーフレームの段階をすっ飛ばしてしまいました。

自分でラフを書いて即制作というフローが多かったせいか、そのクセが抜けてません。

ナユミ
ナユミ

Adobe XD を持ってるのだけどイマイチ使い方を把握できなくて使ってなかったので、今後は作業にねじ込んでいきたい~!

サイトカンプ作成

こんなサイトを作りたい!

こういうサイトが作りたいなぁと考えながら、かわいい寄りのサイトにしたかったので、様々な配色を提供しているサルワカさんを見本にして作成。

ロゴとアイコンは、個人の名刺などに使っているものを使って、このサイトに来てくれた人がすぐにわかってもらえるようにしてみました。

実機でざっくり確認してみましたが、スマホ用のサイトでの表示が、押しづらかったり、文字小さすぎるかも…とちょっと微妙だったのでまだ手直しが必要です。

仕様書の作成(事前準備)

今までの仕事柄、業務が自分一人で完結していたため、誰かに引き継ぐための仕様書や指示書を作成したことがなく、仕様書作成も0年生レベル。

今後、コーディングは外注しよう、他の人に任せよう…なんて事案も発生する事がありうるので、自分自身に向けての仕様書を作成してみようと思います。

Progateの課題スライドには「道場コース」という、実際の指示書を見ながらコーディングをする。

というモードがあり、そこに出てくる指示書を参考にしつつ、このサイトとか、このスライドなんかを見本にして作ってみたいと思います。

制作したらまたこの記事に貼り付けますね!

ナユミ
ナユミ

もうちょっとだけ続くんじゃ

ABOUT ME
ナユミ
あなたの日常をそっと応援するデザイナーさんです■アメリカ人パートナーと結婚準備中💍■デザイン/ロゴ/グラフィック/UI/UX/イラスト/漫画/虫食/ビリヤニ/ダルスープ■引きこもり支援活動あねサポnote→https://note.mu/nayumi_ricedays