ホームページデザインの様子を公開です。その1/全体(Jimdoホームページ)

告知
デザイン・イラスト
今回は、ホームページのデザインサービスについて詳しく書きたいと思います。
いつも、どのような「考え方、こだわり、根拠」を持って作業をしていて、どのようなデザインができあがるのか…といった、デザインの裏側のお話になります。

こちらのサービスの内容にも少し触れています。興味ある方はぜひチェックしてみてください☆

お客様の「理想のホームページ」の共通点

まず、「お客様はどのようなホームページを欲しいと思っているか?」からです。
みなさんの理想のホームページ像は似ていることが多く、だいたい以下のようなイメージです。
①ホームページを通じて、お客様が次々と商品やサービスを利用してくれる
②おしゃれなデザイン
③お客様にホームページの中身を楽しんでもらえたら嬉しい
このような理想を実現するため、デザイナーはあれこれと試行錯誤をします。


今井きいの、信条のようなもの

そして私の場合は、このお客様の理想の実現にくわえて、以下のような思いを持って20年以上デザイナーの仕事をしています。
1.「自分で情報を更新しやすい」ホームページは、育ち、活躍し、時間をかけて検索上位になる
2.「わかりやすい、読み応えがある」とお客様に思われるホームページは、リピーターが増える
3.小さくスタート。段階的にグレードアップすることで、負担が少なくより良い内容のホームページになっていく
これは長年のデザイナー歴から得た、自分なりの結論のようなものです。


成長度で変わるホームページ 3ステップ

では、この合計6つのポイントを実現するホームページの運営方法はあるのでしょうか?
ビジネスの段階によって内容は違いますが、私はあると思います。下記のように、成長段階によってホームページの機能や質を使い分ける方法です。

①ビジネス初期Jimdo、Wix、ペライチ、ブログ などの無料サービスでスタート(0~15万円)
②ビジネス成長期…ワードプレス(Wordpress)ホームページで質と内容の強化(10~100万円)
③ビジネス成熟期独自システム・プログラムのホームページ(100万円~)

私は、がっつりとホームページのデザインをすることも可能ですが、起業段階や、成長期に向けてがんばっている方のサポートが好きなので、『ビジネス初期』のホームページをデザインさせて頂くことも比較的多いです。


おすすめのホームページサービス「Jimdo(ジンドゥー)」

ビジネス初期向けのホームページサービスの中でも、とくに「Jimdo(ジンドゥー)」というホームページサービスと、各種ブログのカスタマイズを仕事でも趣味でもしまくってきました。

Jimdoとは、開設・維持費ともに0円で気軽にホームページを始められるサービスのことです。
ただし無料コースでは、デザインにおいては制限の多いのがネックです。かといってカスタマイズを施さないテンプレートのデザインのままでは“かゆいところに手が届かない”、見づらい状態であるのが玉にキズ。

しかし私は「無料コースのまま極限までカスタマイズする!」というタイプでありちょっとマニアなので、その性分を活かしてデザインを施します。
今回は、そのJimdoで作ったホームページについて、数回に分けて解説させていただきます。

ホームページ ビフォア・アフター

さっそくですが、私がJimdoで作ったホームページをお見せします。

しかし、過去に制作させて頂いたJimdoサイトはいくつもありますが、前に上げたステップ②の「ワードプレスホームページ」へみなさま順調に移行されているため、残っているサイトがありません。うれしいことです!

ということで、サンプルサイトになります。
jimdo画面_完成図.png
このようなホームページを短期間で持てるのが、Jimdoのメリットです。


Jimdoホームページ デザインの流れ

では、デザインの流れになります。まず、テンプレートを選んだだけの状態からスタートです。(ご自分でJimdoを使うときも同じ流れです)
jimdo画面_カスタムなし-情報なし.png

次に、テキストや画像、ロゴなどの情報を流し込みます。
jimdo画面_カスタムなし-情報あり.png

なんとなく自分のホームページという感じになりました!

さて、通常のJimdoではここで満足。ある程度デザインが自動でされるため、90%完成といった感じになります。
無料コースでは、あと少し、文字の色や大きさや背景の色などの小範囲のデザインのカスタマイズが可能です。


満足せず、さらにカスタマイズする

ホームページの細部のデザインを操るしくみを「CSS(シーエスエス)」と言います。
私はCSSを“いじる”のが趣味のため、これでは全く満足ができません。むしろここからがスタート。ということで、細部までゴリゴリとCSSのカスタマイズを始めます。

そしてちまちまといじった後の完成はこちらです。
jimdo画面_TOP2_トリミング.png


細部カスタマイズのビフォア・アフター

パッと見た感じではどこがどう変わったか分かりづらいかもしれませんね!
しかし、デザインだけでなく、文字サイズ、ジャンプ率、空間、色のコントラストやグラデーションなどを調整したことで、目で追おうと思わないでも情報が目に入るようにしてあります。

では比較してみましょう。
jimdo画面_ビフォアアフター_2種.png
ページの下部には外部のSNSやブログの表示もしていますが、そこも細部までこだわっています。


長年の知識と経験でデザインするホームページ

通常、Jimdoの無料コースでここまでのカスタマイズは難しいです。
では、どのようにカスタマイズしているのかというと、長年のJimdo経験+長年の趣味 で貯めこんだCSSカスタマイズの知識と技術のフル活用です。

次のブログでは、さらに細部のこだわりについてお伝えします!→2へ



↓今井きいのサービス一覧
デザイン始めましたバナー.png


↓ブログ一覧

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら