こんにちは！スピードリンクジャパンの人事部です。
この度、私たちの新しいWebサイトを公開いたしました(о´∀`о)
今回は、企業サイトと採用サイトの2つを同時にリニューアルしましたが、それぞれ明確なコンセプトを持たせています。
企業サイトでは「会社」としての信頼感やビジョンを前面に押し出し、採用サイトでは「人」を主役にして働く仲間の魅力を最大限にアピールできるような構成にこだわりました。

★コーポレートサイト⇒https://slj.jp/

★リクルートサイト⇒https://recruit.slj.jp/

今回のサイト制作にあたり、「Claude Code」をフル活用して構築しました。 「AIでWebサイトを作る」と聞くと、「プロンプトを一言投げたら一瞬で完成した」というスマートなイメージを持たれるかもしれません。
ですが、現実は全く違いました。
AIは魔法の杖ではなく、あくまで強力な「パートナー」です。
今回は、AI制作の現場で私たちが一番ぶつかった「ある巨大な壁」と、それをどう乗り越えてサイトを完成させたのか、その裏側をお話しします。

一番の難関：「視覚的なデザイン」をどう言葉で伝えるか？

開発を進める中で一番難しかったこと。それは、「AIにデザインのイメージをどう伝えるか」でした。
プログラムのロジックや機能なら「〇〇の処理をして」とロジカルに書けば伝わります。しかし、デザインや視覚的な表現はそうはいきません。

「もっとスタイリッシュにして」
「SLJらしいスピード感を表現して」
「余白を活かして洗練された感じにして」

私たちが頭の中に描いている「いい感じのニュアンス」を文字にしてClaude Codeに投げても、返ってくるデザインは「……なんか違う」の連続。
AIは指示通りに動いてはくれますが、私たちの心の中にある「SLJらしさ」という抽象的な感覚までは、最初からは読み取ってくれませんでした。
文字という言葉の限界と、人間の視覚的感覚を言語化することの難しさを痛感する日々が続きました。

AIと対話する中で掴んだ「デザイン言語化」のヒント

試行錯誤を繰り返す中で、AI（Claude Code）に視覚的表現を伝えるためのコツが少しずつ見えてきました。単なる命令ではなく、共通言語を作るような感覚です。

1. 抽象語を捨てて「状態」で指定する
   「かっこよく」ではなく、「背景はダークグレー（#1A1A1A）、文字は白、アクセントカラーに青を使ってコントラストを強くして」と具象レベルに落とし込むことで、AIとの認識のズレを最小限に抑えました。
2. 要素の「距離感」を数値化する
   「ゆったり配置して」ではなく、「各セクションの上下Marginを120px以上取って、視覚的な視線誘導を作って」と指示する。これにより、プロのデザイナーが意図するような「呼吸するデザイン」をAIに再現させることが可能になりました。
3. デザインの「役割」を伝える
   「訪問者にまず会社としての信頼感を与えたいから、ファーストビューはシンプルかつ重厚感のある配置にして」と、なぜそのデザインにしたいかの目的を共有する。目的を伝えることで、AIは単なるコード生成を超えた提案をしてくれるようになりました。

指示出し（プロンプト）を変えるたびに、Claude Codeが繰り出すコードとデザインが見違えるように良くなっていく過程は、まさにAIとの共同作業そのものでした。

このように進めていました！

AI×人間のコラボレーションで生まれた新サイト

AIはコードを爆速で書いてくれます。人間が数時間かかる実装を、わずか数秒〜数分で終わらせるそのスピードは圧倒的です。しかし、
「SLJらしさとは何か」
「ユーザーにどう感じてほしいか」
という最終的な意思決定は、人間にしかできません。そして、Webサイトは人会社に合ったデザインを考えながら進めなければなりません。

「どうしたいのかを、AIに詳しく説明し、共に作り上げる」
このキャッチボールを何度も何度も繰り返したからこそ、妥協のないSLJらしいWebサイトが完成しました。AIを使った開発に挑戦中の方、これから試してみたい方のヒントになれば幸いです！

新しくなったSLJのWebサイト、ぜひ実際に触って、私たちの「言葉の格闘の成果」を確かめてみてください！

★コーポレートサイト⇒https://slj.jp/

★リクルートサイト⇒https://recruit.slj.jp/

27卒 | 文系初心者からWebエンジニア、PM、コンサルになりたい人！ - 株式会社スピードリンクジャパンのシステムエンジニアの採用 - Wantedly

▼応募後の流れ カジュアル面談・今後の選考の案内 → 選考（希望者） 私たちは、文系や未経験、初心者の方を抜群の教育環境を生かし、 教育・育成を行い、プロのエンジニアを育成してい...

https://www.wantedly.com/projects/1513864?post_id=1090729&post_location=in_content

株式会社スピードリンクジャパンの募集・採用・募集条件 - Wantedly

株式会社スピードリンクジャパンの新卒・中途・インターンの募集が20件あります。気軽に面談して話を聞いてみよう。職種や採用形態からあなたにあった募集を見つけることができます。募集では「どんなことをやるのか」はもちろん、「なぜやるのか」「どうやるのか」や実際に一緒に働くメンバーについて知ることができます。

https://www.wantedly.com/companies/speedlink-td/projects