トップぺージデザインカンプ | 福岡のホームページ制作はマリオ君にお任せ

トップぺージデザイン作ってみた

お久しぶりです。

結構今週は残業・・・・・いやサービス残業でトップページのデザインを完成させました。

正直通常業務をこなしながらの自社サイト結構大変。。。。

しかし、自社サイトからの集客！
↓
会社にお金が入る
↓
自分にもお金が入る
↓
幸せになる

これ。

ただこれを目指してもくもくと作るのみ！

一応かるーく会社で方向性をプレゼンして

「いいよ・まかせる！」

って丸投げの広告代理店様ばりの内容で作り始めています。

簡単に使用を下記きます。

サイト名・ロゴ

適当に作ったものが採用され現在のマリオ君に決定

おとなりさんちのデザイナーは接しやすさを演出しております。

自分の好きにできるところが唯一自社サイトのいいところですね。

デザイン

「わかりやすく・かわいく」

話の流れで、ロゴがポップだからかわいくしたらって話に

また、これはうちの会社の絶対条件ですが

「デザインはセンスだが、見やすくするのは努力」

だから見やすくすることはがんばれ

って社訓があり

見やすく作るのは大前提で制作。

色（コーポレートカラー

特に決まりがないので

困ったら清潔感の青

で決定

ぺージ構成

「すべて任せる」
「自社のことだからわかるだろ」

はい、ブラック確定の指示です。

一応任せられたので、
考えて入れていきました。
後で、これもいれろ、あれも入れとって言われてもいいような作りにします。

納期

縛りはないが、徐々にアップして制作することに
ブログを書きながら

できれば、平日の2時間と土曜日で一気に終わらせたい

で徐々にコンテンツを充実

が目標

以上が
ほんとど参考にならない社内でのヒアリング内容


でトップページのデザインカンプはこちら

ここクリック

まだ社内OK出ておらず、細かいところは変更になると思いますが
どういったいとで作成したか説明していきます。

説明の前にまず感謝を

今回サイトに使用させていただいておりますイラストは

時短だ様のイラストを使用させていただいております。

ほんとありがとうございます。

TopeconHeroesダーヤマ様まじ神です。

たくさん使わせていただきますので、ラインスタンプ爆買いします。

そもそもアイコンもほとんどダーヤマ様のアイコンを使用させていただいているのでほんと助かっております。

それでは何を考えて、作っていったのか説明していきます。

デザインの意図を説明

一発目のインパクト

全体のデザインはとにかくかわいく・とにかくわかりやすくです。
あと、文章とかも他社と差別化するために、会話口調・ブログ形式的な感じで制作しております。

気を付けたところはフォントとスペース（余白）ですかね。

で細かい説明は

今回スタンダードに一番上にh1タグで入れる予定のサイトタイトルを表示します。

昔のサイトは一番上にh1タグでサイトのタイトルを入れるサイトばかりでしたが

最近は見た目をスタイリッシュにするため、表面上に記述するサイトは少なくなってきた印象です。

でアイキャッチがホームぺージで重要なので

一発目で情報をつめこんでいます。（うちの会社はこれよくやります。

大切な情報を一目でわかりやすく表示し、詳細をよんでもらう作戦のやつです。

初期費用無料で月額がいくらでって感じです。動きをつけていれたいなーと思ってます。

でナビはメインどころだけで、入りきらない奴はハンバーガにぶち込むいつものやつ

会話口調で読みやすく

早速ブログでよくでてくる吹き出しです。

ちょっと文章がおおいのでコーディングの時に減らすかもしれません。

基本的にサイトを見に来ていただくお客様は初めて依頼される方であまりwebのことがわからない方をペルソナにしており読みやすい文章にしております。

疑問を投げかけるスタイルです。

そもそも、かっこいい文章かけないし・・・・

ちなみにロゴとここででてくるイラストは自社制作のイラストです。

憎たらしい顔してますね。

自慢の機能はアイコンを入れてわかりやすく

吹き出しで書いた疑問に答える感じで、何ができるのかアイコンをいれて見やすく表示したものです。

アイコンの一部の色を変えてメリハリをつけています。


また、後で追加できるように、レイアウトはスタンダードに並べています。

3種のお問い合わせ方法を設置

いままでに気になったお客様が連絡しやすいように、ここでお問い合わ情報をぶち込みます。

ランディングページとかでよくある途中途中に挟む感じですね。

見たお客様は逃がしません。（笑）

文字の部分は無限ループで左右に動かす予定です。

いままで、うちの会社では公式ラインやってなかったので、（お客様の設定等はやっていますが運用はほぼしていないよう）

なので、勉強のため運用する予定です。

制作事例をスライドで

イラストばかりで写真をいれるタイミングがみつからずページの中心にあたる場所に制作実績の写真をいれています。


ここは横幅を指定せずに画面全体でスライドさせたいです。

特徴でレイアウトに動きを

レイアウトが横横って感じでしたので

特徴はたてで制作

左のコンテンツの文章はposition stickyで上下に動かす予定です。

流れは一目でフローがわかるように

全体的に項目には数字や吹き出しなどをいれて目立たせる作りにしています。

提案までは無料というのが伝われば、問い合わせの確率があがると思ってつくってます。

エンタメ部分ちょっと休憩の数字で見てみる

これは少しおもしろで、特に意味はなく、親しみをもってもらうだけのコンテンツですね。

数字はカウントアップ予定です。

実際に福岡のホームページ制作会社様かなりレベル高いですよね。

うちの点数はかなり過大評価でいれております、すいません。

アコーディオンで設置

お客様の疑問に答えるだけでなく

キーワードやぺージ遷移させるのにとても便利なコンテンツですね。

あるとサイト制作にとても便利です。

であとは

最新情報とブログですね。

ブログ現在アイキャッチいれてないので、トップページができたら、まずはブログをみやすく

目次や見出しの設定をまずしたいと思います。

で最後にフッターです。

見やすくはできたかなっと思っています。

これで、月曜日のミーティングでみんなに見せて、よかったらコーディングに入ります。

結構めちゃくちゃしてるからコーディングめっちゃ大変そう・・・・

またスマホは、自社サイトなのでカンプは勘弁してほしいな・・・

それではまた。