フリーランスとして独立して2ヶ月が経ちました。名刺代わりになるものが必要だと思いながら後回しにしていたポートフォリオを、ようやく公開しました。
このブログの1本目として、何をどう考えて作ったのかを残しておきます。同じように「自分の仕事をどう見せるか」で迷っている方の参考になれば幸いです。
きっかけは、使っていたサービスの終了
これまではポートフォリオ用のWebサービスを使っていました。テンプレートに沿って入力すれば形になるので便利でしたが、そのサービスが終了してしまいました。
ゼロから作り直すのは面倒だな、と最初は思いました。ただ考えてみると、ちょうどいいタイミングでもありました。
というのも、独立してから引き受ける仕事の中身が変わってきていたからです。以前は記事編集やWebメディアの運用が中心でした。今は、業務ツールの開発と、生成AIを使った業務改善の相談が大半を占めています。古いポートフォリオは、その変化にまったく追いついていませんでした。
一番時間がかかったのは、載せる内容を決めること
作り始めてわかったのですが、デザインやコーディングより、何を載せるかを決めるほうがずっと難しいです。
最初に書いたのは、よくある形でした。「できること」を項目で並べて、「使えるツール」をロゴで並べる。書いてみて、自分でも面白くないと感じました。
似たようなスキルを並べた人は他にいくらでもいます。「ChatGPTが使えます」と書いたところで、今どき差別化になりません。
そこで考え方を変えました。スキルではなく、「相談されたこと」と「つくったもの」を対で並べる構成にしたのです。
たとえばこんな具合です。
「注文書、毎回Excelから手で書き写してるんです」 → 商品を選ぶだけで注文書PDFが出る入力ツール
「イベントで集めた手書きアンケート、入力が終わらない」 → 撮影した用紙をAIで読み取り、確認しながら顧客台帳へ登録するツール
この形にした理由は単純です。私に仕事を頼んでくださる方は、「AIに詳しい人を探している」わけではありません。目の前の面倒な作業をどうにかしたいだけです。だとすれば、技術の名前を並べるより、現場の困りごとをそのまま書いたほうが「うちも同じだ」と気づいてもらえるはずだと考えました。
営業とカスタマーサポートの現場に立ってきた経験が、こういうところで効いてきます。要望をそのまま実装するのではなく、「本当に手間になっているのはどこか」から考える癖がついているのだと思います。
WordPressの固定ページにしなかった理由
さて、作ったHTMLをどこに置くかです。
このブログはWordPressで動いていて、テーマはCocoonを使っています。素直に考えれば、固定ページを1枚作って、そこにHTMLを貼り込む方法があります。
やめました。理由は、テーマ側のCSSと確実にぶつかるからです。
WordPressのテーマは、見出しや余白、フォントに独自のスタイルを持っています。そこへ別のデザインのHTMLを流し込むと、意図した見た目になりません。文字の大きさが変わり、余白が潰れ、レイアウトが崩れます。それを一つずつ打ち消していく作業は、デザインを最初から作り直すのとあまり変わらない手間になります。
そこで選んだのが、サブディレクトリに静的HTMLを直接置く方法でした。
atsuageworks.com/ ← ブログ（WordPress）
atsuageworks.com/works/ ← ポートフォリオ（静的HTML）
サーバーの public_html の中に works というフォルダを作り、index.html をアップロードするだけです。WordPressとは完全に独立するので、テーマの影響を一切受けません。
「WordPressのサブディレクトリにファイルを置いたら、URLが乗っ取られるのでは」と心配になるかもしれません。実際には問題ありませんでした。WordPressが自動で書き出す .htaccess には、実在するファイルやフォルダへのアクセスはそのまま通すという条件が最初から入っているためです。
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
この2行が「ファイルとして存在しない場合」「ディレクトリとして存在しない場合」に限ってWordPressへ渡す、という意味になります。works フォルダは実在するので、WordPressを経由せずそのまま表示されます。
つまずいた点
順調に進んだわけではありません。3つほど引っかかりました。
SSLの扱い
常時SSL化をWordPressのプラグインで行っている場合、/works/ はWordPressの外にあるため保護されません。「保護されていない通信」と表示されてしまいます。私の環境では、サーバー側の .htaccess に転送設定が入っていたので事なきを得ましたが、事前に確認しておくべき項目でした。
スマホでリンクが消える
Cocoonのメニューは、PC用とモバイル用で表示位置の設定が分かれています。「ヘッダーメニュー」だけにチェックを入れて満足していたら、スマホからは項目が出てきませんでした。「ヘッダーモバイルボタン」と「モバイルスライドインメニュー」にもチェックが必要でした。
トップページが空になった
WordPressの初期投稿「Hello world!」を削除したところ、トップページが「投稿が見つかりませんでした」だけの状態になりました。ポートフォリオからブログへ飛んだ先がこれでは、かえって印象が悪くなります。この記事は、その穴を埋めるという実務的な理由でも書いています。
これから作るもの
ポートフォリオには実績を載せていますが、クライアント業務のコードや画面をそのまま公開するわけにはいきません。契約上の問題もありますし、実物と誤解されても困ります。
そこで、架空の会社を設定したデモを作る予定です。まずは見積シミュレータから。料金体系を選ぶと金額が出る、というシンプルなものですが、「その場で見積が出せない」という課題は業種を問わず共通なので、説明がしやすいはずです。
できあがったら、またここで報告します。
お仕事のご相談について
業務ツールの内製開発、生成AIの導入・定着支援、企業向け研修、Webメディアやeラーニングの制作進行などを承っています。熊本を拠点に、フルリモートで全国対応しています。
要件が固まっていない段階で構いません。むしろ、固まる前のご相談のほうが得意です。
詳しくはこちらをご覧ください。
コメント