2021年４月28日に、個人としてのポートフォリオサイトをオープンいたしました。
1月から取り組んでいる、月イチ自主制作企画の一環で制作したものではありますが、今後長く使っていくサイトになるかと思います。
本日のブログでは、このポートフォリオサイトについての解説を行ないたいと思います。
使用技術
まずはいつもどおり、使用している技術のご紹介から。
言語
- HTML5
- Sass(scss)
- jQuery
CSS設計
- BEM
制作の上で意識したポイント
「どれだけ見てくださる方の負担を減らせるか」
「どうすれば、見てくださる方が負担なく情報を得られるのか」に重きを置いて制作をしました。
このサイトは、トップページがいわゆる着地ページとなる想定です。ですので、パッと見たときにトップページ上のどこに何の情報があり、何を押せばどこにたどり着けるのかを明確にすることをモットーに作成しています。
ターゲットはまずどの情報を一番に求めているのか、どういう色付けや配置なら忙しい中でも目に入るのか、など、いろいろと考えることがたくさんありました。
現段階のものがそのすべてをカバーしているとも思ってはいませんが、「自分でよく考えて作る」という作業をしたことで、我ながら結構整ったサイトになったのではないかなと思っています。
コンテンツの順番
ポートフォリオサイトは技術面でのアピールとしての機能が主なものだと思います。
ですので、最初のコンテンツに作品群を配置し、カード内のボタンから「詳細ページ」か「作品そのもの」にアクセスできる選択肢を設けました。
次に、アピールに使用できるアウトプット先を設置しました。ブログとTwitterですね。
当初、ブログのところはRSSを表示させることも考えていましたが、リリースまでのスピード感を考えたときに足かせになってしまうと思いました。ですので、いったんはキャプチャで掲載し、あとからRSS実装を追加する修正を行う方向で考えることにしました。
アウトプットを紹介し終えたところでプロフィール。まず最初に伝えたいことだけドンと目立たせて置いてしまって、他の経歴やスキルセット、趣味などは思い切ってすべて下層ページに置きました。
スキルセットもトップに置いたほうが良いか迷いましたが、あまり大きなものを掲載するとページが長くなってしまうので、スキルセットは下層ページの一番上のコンテンツとして配置しています。
デザイン面などの解説
配色について
今まで自分でデザインを作ったものの中では一番、ベースカラー、メインカラー、アクセントカラーのバランスが取れているかなと思っています。
- ベースカラー：#fffafa（ほんの少しだけ赤みがかった白）
- メインカラー：#1ca5ab（ターコイズブルーより少しだけ濃い青）
- アクセントカラー：#ab1b5c（紫に少し寄った赤）、#1bab23（緑）
基本的には上記のカラーで構成しています。場所に応じて、透明度が付与されているところもあります。
h2（各コンテンツの大見出し）に関しては、背景のブルーとテキストの黒が（可読性的に）若干合っていない気もしていますが、いったんこのまま公開しています。
枠線について
たとえば作品集セクションのカードコンポーネントや、各作品の紹介ページのキャプチャなど、枠線がついている箇所があります。
この枠線は、borderプロパティではなくbox-shadowを細くかけることで枠線に見せています。
borderだとどうしてもハッキリとした線になってしまってやぼったくなる感じがありますが、シャドウなら少しぼかしたりすることもできるので、さりげなくカードを区切ることができるのかな、と思いました（知識自体はTwitterで仕入れました 笑）。
ロゴ
ロゴについては自分でデザインした、というより、Canvaというデザインを作成できるサイトのテンプレートを使って作成しました。
ロゴとして、細かい文字が入ってしまっているのはあまり好ましくないのかもしれませんが（単純に文字が見えないため）、それなりに立派に見えるロゴをこしらえることはできます。ノンデザイナーだけど自分のサイトにロゴが必要、みたいな場合にはCanvaがお勧めできます。
今後の対応予定
今公開している状態が、完成形ではありません。今後も修正・更新を予定しています。
現状、考えている更新は以下です。
- 作品集にポートフォリオサイトの解説を追加
- 掲載作品が4つ以上になったタイミングで、作品一覧ページを作成。トップの作品集にはイチオシのみを掲載する
- アウトプットセクションのブログをRSS表示にする
- 専用メールフォームを作成する（プライバシーポリシーも併設）
メールフォームについては、現時点では本ブログのお問い合わせフォームに遷移させています。
ですがそうなると、プライバシーポリシーもブログのものになってしまいますし、デザインも大きくかけ離れていたり、設問項目も同じになってしまう等の問題点もあります。
そのため、ゆくゆくはポートフォリオサイト専用のメールフォームページを用意したいと考えています。
上記以外にも、更新したい・組み込みたいと思った機能やページがあったら随時更新する予定です。
月イチ自主制作についてのお知らせ
2021年1月に立てた目標として、2021年は自主制作の年にする！というものがありました。
それは学習としてのはたらきはもちろんのこと、こうしてポートフォリオサイトを作成したときに掲載できる作品を用意しておく、という意味合いもありました。
最初は今年いっぱいやっていくつもりでいたのですが、そこから私を取り巻く状況も変わりました。
これから諸々の活動が始まっていくこともあり、いったん月イチ自主制作というのはここで区切ろうと思っています。
ただ、現在WordPressの学習も進めていますし、他にもまだまだ勉強が必要だと思いますので、自主制作物というのはこれからも作っていきます。そのときは、またポートフォリオサイトのほうに掲載していくつもりですので、今後もよろしくお願いいたします。
まとめ
今回は、4月末にリリースしたポートフォリオサイトの解説でした。
現時点では実はまだ書けないこともあったりして心苦しいのですが、それらも含めて早くご報告ができるように今後も精進いたします。
ここまで読んでいただき、ありがとうございました。
コメント