IT企業のHP作りました。

会社の仕事のひとつでIT企業のHP、ラフ案デザインをさせて頂きました。こちらの仕事からSEO対策等もまかせて頂き、現在はHPの管理保守、主にSEO対策レポート作成をさせていただいています。SEOの観点から必要と感じられたページはデザインのリメイクを提案しています。

https://www.nextlinks.co.jp/

デザインコンセプト

地元密着のIT企業。ビビットグリーンが会社のキーカラーとなるため、IT業種の中でも親しみやすさを感じられるデザインを心がけています。

ターゲットユーザー

35~50代
DXを検討している経営者
IT企業への就職を検討している学生

担当領域

ラフ案作成（Figmaにて前任の引継ぎ）
SEO対策（GA4を使ったアナリティクス解析）

製作期間

6か月。現在もSEO対策を施工しながら必要ページのリニューアルを行っています。

SEO対策用に作り変えた採用ページ

採用のお問い合わせを増やしたいとのことで、採用ページの質を上げました。SEO対策キーワードを使い、ページ内のボリュームを増やし対策しています。ページ内ボリュームが増えるとその分ページが長くなってしまうため、タブ分けを行いました。必要な情報へ瞬時に飛ぶことができ、UIにも配慮しています。

https://www.nextlinks.co.jp/recruit

Figmaを使ったSEO対策用ラフ案作成

先方とはFigmaを使ったSEO対策のやりとりをしています。

対策キーワードを入れた文章を使用したページ作りを意識
ページを分散させるのではなく、一つのページの量を多くし、ページ自体の質を上げる。
Figmaのアートボードを使ったデザイン提案、やりとり。

実際のラフ案作成、やりとりはこのような雰囲気です。対策用ラフ案を作成し、作成のポイントやなぜこのデザインにしたかを先方に箇条書きで説明します。リテイクはコーディング担当と相談しながら実施し、再度提案する形式を取りました。

企業理念ページのデザイン

企業理念は歯車のデザインとなっています。前任のアイデアです。文字のバランス等整え、背景の差し替えをしました。

https://www.nextlinks.co.jp/company/philosophy

スマホレスポンシブではこのように表示されます。スマートフォンでの表示は文字が小さくなり読むことが可読性が悪くなるため、歯車は背景に残して大切な理念を箇条書きにしています。Illustratorにて作成しています。

使用ソフト

Figma
PhotoShop
Illustrator
GA4
SerchConsole

工夫したこと

コーダーと連携しながらデザインしました。ラフ案は他の方が作っていたのですが、退社する運びとなったため、私がデザインを引き継ぎました。XDの方が使い慣れているのでFigmaはあまり得意ではなかったのですが、これを機に少し克服することができました。当初はWordPressでの実装を予定していましたが、セキュリティ強化の為、HTML/CSSのみを使った静的サイトで作成しています。ラフ案作成は私、実装はコーディング班と分担での作業を行っています。

現在は、SEOを意識したGoogleAnalyticsを使用したデータ収集とデザイン作成を担当しています。どうしたらもっとターゲット層に来てもらえるのか、考慮しながら質の高いHPを目的としたページ作りを行っています。