こんにちは。ヒサノアスカ（@AsukaHisano）です。
現在、とあるIT系企業のローカライズ（l10n/i18n）テスターを本業みたいにしています。
ただこのお仕事、クライアントの都合でお仕事のあるなしが決まる不安定な状況でして、事実今月（2020年3月）は真顔で「やばい」と呟くくらいお仕事がありません。
こういう不安定な状況から抜け出すためにもWeb開発をおしごとにしなければと改めて実感したので、
- やってる/やったことの記録
- 学んだことの覚書
- ポートフォリオづくりの準備
を目的に、ブログにて徒然更新していこうと思い立ちました。
その第一段階として、これまでずっとやりたいと思っていながら着手できてなかった、個人サイト全面改築の準備に取りかかってます。
この記事では、個人サイトを作るにあたって事前に考えたこととか再勉強した内容をまとめます。
ところで個人サイトって何さ？
「そもそも個人サイトって何？」って人もいると思うのですが、私の言う個人サイトは自分の作品をインターネットで公開するために個人が作成・運営するサイトのことです。
ちなみにオリジナル作品の場合は個人サイト、二次創作の場合は同人サイトとか呼ばれてました。
2000年代はまだ今みたいにWebサイトが簡単に作れるようなサービスもなかったので、人によってはホームページビルダーを使ったり、ビルダーの挙動に辟易した層は自分でHTMLを勉強してメモ帳とかでごりごり作っていたものです。
今じゃもう見事にレガシー……というか、たぶん一部の人たちにとっては黒歴史もいいところでしょう。
最近ではいわゆる「なろう」やアルファポリス、カクヨムなどの小説投稿プラットフォームがあるので、わざわざ更新や管理がめんどうな個人サイトを作る人はレアになってます。
事実、サイトを持ってる人でも自サイトには目録のみ掲載して、小説自体は小説投稿プラットフォームで更新していたり。
投稿プラットフォームがあるならなんで個人サイト？と思われるかもしれませんが、プラットフォームはやっぱりあくまで外部のものなんですよね。 自分はあくまでユーザー。お客さんなわけです。
運営者の都合やなんやでいつサービスが終わるかもわかりませんし、作品も表現がアレだったりすると公開停止されることもあります。
つまるところ、自分がルールな自分の領域で、自分の好きなものを好きなように書いて公開したいって層や、あとは複数プラットフォームに投稿している作品をまとめて紹介したいって人にとって、個人サイトはなかなか使えるのです。
あとは作家としてのポートフォリオにもできるかな？
ヒサノの場合は完全に前者です。
自分の産み出した作品を、他者の評価とか気にせず好きに書いて掲載して愛でたい。そして昔から見に来てくれていた人たちが思い出した時に立ち寄ってくれたら嬉しい。
あと自分でサイトを作ることで、覚えたばかりのテクや小技を思う存分試せるってのも嬉しい。
要件定義
要件定義、とやたら大仰なことを言ってますが、個人使用メインなので「何が目的なのか」「何をやる・やりたいのか」「どこまでやるのか」を明確にするってのが大目的です。
こういうのをきちんと作るのははじめてなので、変なところがあっても「あー、やってるなあ」と生暖かく見てやってください（逃げ）
1.1 目的
- サイトUIおよびデザインのブラッシュアップ
（現状）スマホでの操作性がひどいので - サイト構成の見直し
（現状）昔ながらのディレクトリ＆ページ過多な構成なので、小説一覧以外はトップページ全載せなペライチっぽい形にしたい - HTML＆CSSを使ったサイト制作実績を作る
（現状・希望）あまりにも個人用すぎるため実績として公開するのがアレなので、他人様に見せる用のものを作る - 製作過程も記録して、ポートフォリオに収める
1.2 作業範囲
- 複数ある個人サイトすべて
- ディレクトリ構成の変更は必要最低限に抑える
- 古いCGIシステムは停止して別のものに置き換える
- フォーム関連→Googleフォーム
- アクセス解析→Analytics
1.3 やりたいこと
- 将来的な管理や変更がしやすいようにHTMLやCSSを組み立てる
- 枠だけのテンプレートを作って、複数サイトで使いまわせるようにする
- アイコンフォントの活用
1番目の項目ですが、Bootstrapみたいに便利なフレームワークがあるのに使わないの？と言われそうですが、使い方を理解するのに時間がかかること、あとシンプルな小説公開サイトでは使わない機能が多すぎるのでNG。
1.4 できたら嬉しいこと（オプション）
サイトテンプレートを作ったあとに、オプションとして付けたい機能です。
- ダークモード対応 長時間文字を読むのにダークモードは実に便利
- AMP対応
- そもそもシンプルな文字サイトなので早さは必要ないが、読み込みが早いのに越したことはない
- 今後WordPressテーマの作成も考えているので、できることは増やしておきたい
- 実績作り
- PWA対応
- 出先でオフラインでも作品読んでもらえたら嬉しい
- あと実績作り
1.4 やらないこと
- 無駄な機能はつけない
（過去）CSSで実装できるからと嬉々としてハンバーガーメニューを作ったものの、実際のところよけいに使いづらくなった - 要素に対してCSSをごりごり書かない
（悪癖）頭ではわかっていても、つい癖であらゆるCSSを要素に付けてしまうので、事前にレイアウト確認してしっかり分離させ……たいなあ…… - JavaScriptやPHPについて過度な期待＆深掘りしすぎない
（過去）HTML・CSSで実装できるorなくてもいい機能を実装しようとして調べまくった挙句、頭が疲れて燃え尽きた……
これからやること
というわけで、これからやることをざっくりまとめました。
- サイトマップを見直す
- Adobe XDを使ってレイアウト＆ワイヤーフレームを作る Adobe XDが難しそうなら、とりあえず手書きで進める
- SMACCベースでメンテナンス性のあるCSSを作る
- レイアウト決めた時点でCSS構成をしっかり考える
- 必要になるパーツ＆要素洗い出して、不要なCSSは書かない
- HTMLで全要素含めたテンプレートを作る
- ポートフォリオの形にする
実はすでにちょっとHTMLとCSS書いたりしてたのですが、悪癖出まくりなやばいのになりまして。
いろいろ勢い込みすぎてたので冷静になるためにもこの記事を書きました。
ちなみに締め切りがないとうっかりやる気なくしたらそのまま放置しそうなので、5.までを今月中に終わらせる予定。
むしろ今月中に終わらせられなかった場合、4月以降平均的にお仕事もらえたら完全放置の方向に進みそうなので、こっちに集中してやってこうと思います。
