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

工夫したこと

コーダーと連携しながらデザインしました。ラフ案は第一弾チームのデザイナーが作っていたのですが、チームが一度解散し再結成が決まりました。その為、コーポレートサイトのデザインが8割型完成している状態で、デザインを私が引き継いでいます。XDの方が使い慣れているのでFigmaはあまり得意ではなかったのですが、これを機に少し克服することができました。当初はWordPressでの実装を予定していましたが、セキュリティ強化の為、HTML/CSSのみを使った静的サイトで作成、セキュリティの強化を優先しています。ラフ案作成は私、実装はコーディングチームにお任せしています。

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