はじめに
私が鋭意、個人開発中である 「ITなんでも調査屋（仮）」 というWebサイトについて、
制作の過程を、やりたいこと → どう実装したか と言う感じでまとめます。
https://everyit.net/ （調査依頼だけできるようになっています！）
この記事でわかること
個人開発の過程が見られます。
「やりたいこと」と「実装したこと」をそれぞれ記していきます。
動作環境・使用するツールや言語
- VSCode
- React ＋ Typescript
- AWS Amplify Github 連携でのホスティング
- AWS AppSync - DynamoDB
背景を作りたい
問題点
背景が白だとやはり、淡白で作りかけみたいな印象がありました。
実装内容
元々探偵を意識しまくっているので、「探偵事務所の壁」を意識、かつWebサイトとして見やすさを損なわないようにしたかったです。調べたところ探偵ものの時代では、濃い色＋薄い色の縦縞の壁紙が流行していたようで、一旦、茶色/ベージュの細い縦縞を試しましたが、背景が派手すぎてページのコンテンツより目立ってしまいました。
結果としてはもっとコントラスト小さくして穏やかな色調にし、縦縞の感覚を広げることで、背景の主張が強すぎないようにしました。
About画面の調整
問題点
- そもそも骨組みだけで、デザインがなかった
- 文章ががダラダラ長かった
- 即ブラウザバックしたくなるようなだささ
実装内容
壁紙を決めることができたので、「看板風」にしました。
依頼ボードの調整
問題点
ボードっぽくなかった。
実装内容
壁紙が出来たことで、その壁紙に掛けるコルクボードという構図にしやすいと思いました。
コルク風CSSをAIに作成してもらい実装。コルクボードの上にピンで依頼書を止めているいい感じの構図に近くなりました。
次回予告？
- 依頼時の管理者通知機能
- 認証機能（ログインし、調査結果を記入する機能）
- 依頼ボードの絞り込み機能
認証機能を作成した段階で、一旦プロフィールに記載などしたいです。