【こんなことしています！Vol.1】ホームページ作成　～前編～

こんにちは。ゼロベースファクトの北川です。

今回は、私が実際にやってきた業務を紹介しようと思います。　　　　　　　　　　　　　　　　　　　紹介する内容は「ホームページ作成」です。自社のホームページの採用情報を丸々新しく、かつ、　　　カッコよくしてほしいという依頼を受け、初めてのホームページ作成に挑戦しました。結果から言うと、作成完了までに1ヶ月かかりました。（当初は2週間くらいの予定でしたが．．．）

なぜこんなに時間がかかってしまったのか、1週間毎にどのような作業をしてきたのか、前後編2回に分けて紹介していきます。

◆1週目　～調査＆設計書作成～

ホームページを作成した経験がないため、まずは調査から始めました。調査方法は「ひたすら企業のホームページを見る。」そして、カッコいいデザインや色使いなどをメモしていくというやり方です。就活の時は企業のホームページをたくさん見ていましたが、最近は見る機会もなかったので動きのあるホームページの多さに圧倒されました。

調査結果

・カッコいい = シンプル

文字については黒、または背景が暗いときは白を使っていることが非常に多かったです。背景色についても、ある程度の統一性があるとオシャレになるということがわかりました。今回のターゲットは20代～30代の男性がメインになると考えているので、あまり明るい背景色は使用せず、文字色もシンプルにする方針にしました。

・写真を上手に活用

どの企業もカッコいい写真を満遍なく使用していて、ホームページを彩るには写真は必要不可欠な要素だと気づかされました。それと同時に、何の写真を使うか、写真をどうやって入手するかなど、いろいろと考えなければいけない要素が増えました。難しいです。

・動きがあるホームページ

親しみや好感を持たせるために、アニメーションを取り入れてみようと思いました。あまり難しいことは出来ないので、スクロールすると応募ボタンが画面の下に出現するような機能を追加してみます。個人的にカッコいいと思ったのはトップページが動画になっているものです。機会があれば挑戦してみたいと思います。

以上の3つを満たすようなホームページ作成すれば、カッコよくなるのでは？ということで大雑把なホームページの完成形をExcelで作成し、それを元にホームページを実際に作っていきます！

◆2週目　～ホームページ作成～

ホームページ作成に必要な知識として「HTML」、「CSS」、「JavaScript」、「jQuery」などがあると思いますが、私は2年間、C言語を使った業務を行っていて、上記の言語については一切知識が無く、調べながらのホームページ作成になります。

1.大枠の作成

テキストや背景の色、サイズなどは後回しにして、まずは大枠から作ろうと思いました。今回の採用情報の構成として、トップ画像～タイトル～理念、4つの項目という形をイメージしていたので、元々あるプログラムを活用してイメージ通り表示されるようにしました。ここの作業に関しては、あまり時間がかからず出来たので、「意外と早く終わるかも」とこの時は思っていました。

2.CSSで色、サイズの調整

ここはかなり時間がかかりました。どうサイズを変えればバランスよく見えるか、どういう配色がカッコいいかなど、この作業はとにかく試しては変え、試しては変えの繰り返しでした。一番難しいと感じたのが、デザインに関しては答えがないというとこで、極端な話、全部正解なので、試せば試すほどに何が良いのか分からなくなってくるところです。

3.画像の選定

「採用」、「事業」、「経営」、「福利厚生」この4つのイメージに合う画像が必要で、探すのに苦労しました。特に「福利厚生」。これと結びつく写真がなかなか見つからない。写真はホームページの肝になってくるので、できるだけ妥協したくはないところですが、時間もないのでそれっぽい写真を選ばせていただきました。

4.応募ボタンの作成

今回、実装した機能は上にスクロールしたとき、または、一番下までスクロールしたときに画面下に応募ボタンを表示。下にスクロールしたときには、応募ボタンを非表示にするアニメーションを追加しました。方法は「JavaScript」で制御させています。現在位置を取得しておき、その値を用いて上スクロールか、下スクロールかの判断を行い、ボタンの表示/非表示を行っています。

応募ボタン非表示

応募ボタン表示

ついに完成！予定通り2週間で形にできました。

細かいところの修正はまだ必要ですが、一度梅田さんに確認してもらうことに。

その結果．．．少しイメージと違うらしく、もっと今風なホームページを希望されました。

なるほど。もう一度、調査からやり直そう。ということで、

3週目　～再調査　今風なホームページとは？～

に続きます。