chappy vibes

世界を目指す日々と方法 🏴‍☠️

【外注&AI】サイトデザインをリニューアルする

このサイトは、はてなブログをリニューアルして作っている。今回、リニューアルをどうやって進めたか書きます。

方向性について

そもそもどういうブログが上位か

はてなブログランキング上位サイトを見ると、デザインは、はてなブログのサイトからDLしたシンプル仕様のものが多かった。

また、

・もともと有名だったり自分の素性を明かしている人

・エンジニア系の特化ブログ

が上位を占めているようだった。

「chappy vibes」に関しては、

・ライターの素性を明かさない(自由に書けなくなるのが嫌だから)

・ライターは非エンジニア

なので、

🤔上位サイトに倣ってテンプレ利用のシンプルサイトで戦えるかは微妙だな

と思った。

ゴールから明確にしていく

ゴールに関してはここに書いてある通り、

about "chappy vibes" - chappy vibes

世界を味わい尽くして→その上で記事を書くことだ。

↓説明を引用

よくハリウッドで活躍しているスターや地球三周した人が世界を知ってる感を出しつつ深い声で語っていることがあるけど、私はもっと本質的に内側に入って世界を味わい尽くしたい。それでリアルを知って、知ったリアルを再構築して記事を書きたい。

なので、世界を目指すワクワク感がありつつ、カタログ的に記事が俯瞰、検索しやすいといいなと思った。あと単純に見た目が綺麗な方が読んでる人も気持ちいいと思うからサイト速度が落ちない程度にデザイン性が高いサイトにしたかった。

今回具体的に参考にしたサイトは無く、手を動かしながら考えていった。本当はデザイナーに入ってもらって、デザイン全てを丸投げしたかったけど、そういったサービスは見つからなかったし、無理矢理外注すると納得のいくデザインになる担保がない中、かなり費用がかさみそうだったから断念した。

外注

サイトリニューアルに際し、非エンジニアの個人で全てやるには限界があるのでココナラでサービスを探した。

ココナラに関しては、ものすごく当たり外れがあり、友達に嘆いていたら

😅安いサービスは外れるんじゃない? BtoBよりだいぶ安いでしょ?

と言われたことがあり、高いサービスを頑張って頼んだら微妙すぎて泣いたことがある。

ただ、エンジニアに関してはちゃんとした人が多いイメージがある。今回のサイトリニューアルで利用したサービスも大当たりだった。

❶ サイトデザイン周り

デザイン性が高いサイトの土台作成に関して頭を悩ませ、また

😅はてなでは限界があるかな?word pressにすべき?

と思ってたところ、理想の形にすることができた。

❷サイト速度、SEO、細かい微修正

サイト速度改善をしてもらい、SEOに関してアドバイスをもらった。こちらの施策がじわじわ響いて検索順位を上げることができた。

上記サービスは両方ともゴールを理解して、辛抱強く対応してくださりとてもありがたかった。サイトのゴールによって向き不向きはあると思うけど、個人的に巡り会えてとてもラッキーだった。

AIに相談しつつコード作成

サイトデザインに関して、いろいろといじるにあたり、ネットで調べたり、AIに聞いたりした。

↓grokとの会話

f:id:chappy8:20250513182640p:image

AIだとchatGPTとgrokに聞いた。grokのコードの方がうまくいくけど、処理する量が多いからか固まることも多かったのでchatGPTを併用していた。

使い方としては、AIに希望内容を伝える→コードの提案を受ける→ざっくり自分で確認して貼り付け→うまく反映するか確認、という感じで、なかなかうまくいかず何回もやり直した。それなりに時間がかかったけど、AIによって非エンジニアがコードを書く障壁がかなり低くなったことを痛感した。

まとめ

サイトのデザインリニューアルで、だいたい2ヶ月かかったけど(ほとんど自分の作業時間)、外注費用は5万円以内に抑えることができた。

相場としては10万円から100万円くらいなので、かなり安く抑えつつ、納得いくサイトデザインにすることができた。

INFORMATION

サイトデザインに関して利用できるサービス

サービス名: ココナラ
・URL: https://coconala.com/
・概要: フリーランスや個人事業主にデザイン業務を依頼できるスキルマーケット。ロゴ、ウェブデザイン、UI/UXなど幅広いカテゴリでデザイナーを検索可能。ポートフォリオや評価を参考に選べる。
・予算: 5,000円~50万円(例: 簡易バナー5,000円~、サイトデザイン全体50,000円~200,000円)

サービス名: ランサーズ
・URL: https://www.lancers.jp/
・概要: 日本最大級のフリーランスマッチングプラットフォーム。ウェブデザイン、コーディング、SEO対策などサイト制作全般を依頼可能。コンペ形式や直接依頼を選択できる。
・予算: 10,000円~500,000円(例: ランディングページ30,000円~、フルサイトデザイン100,000円~300,000円)

クラウドワークス
・URL: https://crowdworks.jp/
・概要: フリーランスや副業ワーカーと企業をつなぐクラウドソーシングサービス。サイトデザイン、WordPress構築、コンテンツ制作など幅広い案件に対応。初心者からプロまで在籍。
・予算: 10,000円~400,000円(例: バナー制作5,000円~、コーポレートサイト100,000円~250,000円)

サービス名: Canva
・URL: https://www.canva.com/
・概要: 直感的な操作でウェブデザインやグラフィックを作成できるオンラインツール。テンプレートが豊富で、初心者でもプロ並みのデザインが可能。サイトのビジュアル制作に最適。
・予算: 無料~月額1,500円(Proプラン)、カスタム依頼は別途

サービス名: Adobe Express
・URL: https://www.adobe.com/jp/express/
・概要: Adobeの簡易デザインツール。テンプレートを活用してウェブバナーやページデザインを迅速に作成。PhotoshopやIllustratorの簡易版として利用可能。
・予算: 無料~月額1,000円(プレミアムプラン)