Web Design 制作
この記事は自身のポートフォリオサイトの制作過程について書いています
（今回紹介するサイトはこちら）
「自分のホームページを持ちたい」
「サイトを1から構築してみたい」
「けど知識がないから分からない」
こんな悩みを持った方を応援・後押しできる内容になっています
制作に至った経緯
去年、先輩方の卒業制作の展示会では紙媒体を用いた冊子を作っていました
そのときは漠然と「来年はこんなポートフォリオ冊子を作りたいな」と考えていましたが皆さんご存じの通り2020年は新型コロナウイルスが猛威を振るい、個人同士の接触は控えられモノに触れることも敬遠されるような状況でした
そんな状況の中で紙媒体のポートフォリオを作ったところで、たくさんの方に触って見てもらうことが可能なのか？と考えながらたどり着いたのがウェブサイトの構築でした
ウェブサイトであれば卒業制作の展示会でも上の写真のようなQRコードを読み取って自分のスマートフォンからアクセスできます。接触なしで私のポートフォリオを見ることが出来るので感染症拡大予防の観点からも最適解であると考えました
（と、つらつら書きましたが学校側はPandoのようなコンテンツ投稿サイトを準備していたのでただの杞憂でした）
コンセプト
- シンプルに
- 洗練された
- 使いやすい
3点を意識したウェブサイトになっています
それぞれをもう少し掘り下げた内容が下記です
シンプルに
→作品画像以外はモノクロカラーで統一
洗練された
→アルファベットと見出しにfuturaフォント
使いやすい
→スクロール量を抑えた文字数･作品数
制作の流れ
- ラフデザインをノートに書いてみる
- アプリ（ソフト）を用いて正確なレイアウトを作る
- 一旦レイアウトに沿ったコーディングをする
- 変えたい要素や足したい（減らしたい）部分を仕上げる
- 完成
この流れで進めていったので順に説明します
1. ラフデザインをノートに書いてみる
ノートになんとなくイメージしているサイトの流れをラフでもかまわないので一旦書いてみます
私はGoogle先生から「ポートフォリオサイト」と検索して出てきたデザインを参考にしつつレイアウトを考えました
2. アプリ（ソフト）を用いて正確なレイアウトを作る
私はAdobeのイラストレーターをよく利用するのでレイアウト制作にはイラストレーターを利用しました
思いついたレイアウトをいくつか書き出します
同時に、作品にどんな文章を残すかも考えてレイアウトを選択しました（私は3のレイアウトを採用しています）
3. 一旦レイアウトに沿ったコーディングをする
決定したレイアウトを基にコーディングをしていきます
最初から完璧を目指さずにざっくりレイアウト通りになることを目指して作業しました
コーディングに使用しているソフトはVScodeです
また、使用している言語は
- HTML（マークアップ言語）
- CSS（スタイルシート）
- JavaScript（プログラミング言語）
の3種類で基本はHTMLとCSSから構成されています
余談ですが、基本は独学でそれっぽい形にすることは出来ます（私しか編集しないので命名法など細かいところまでは出来ていません）
4. 変えたい要素や足したい（減らしたい）部分を仕上げる
私の場合は、途中で卒業制作用に別のコンテンツを作りたいなと感じたのでポートフォリオサイトから移動できるように作ってみたり、お問い合わせフォームには別の言語が必要なので減らしてメール送信のリンクを作ったりしました
以上がデザインからサイト完成までの流れです
最後に
SNS以外にも作品を知ってもらう手段はあります。また、IT,Webに関する世界は今後も成長の一途を辿ると思います。今日が人生で一番若い日なので自分の可能性を限定せず、さまざまな切り口からデザインに携われることに挑戦していけたらいいなと考えています
