スマートフォンサイトを表示する

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第1回 リメイクの第一歩は下地作りから

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第1回:リメイクの第一歩は下地作りから

執筆:服部 雄樹(服部制作室)

2017年4月17日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,099views

このコラムをPDF形式でダウンロードする

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第1回目となる今回は、リメイクをはじめる前の準備、下地作りについて解説します。

いきなり大きな変更はせず、下準備から始める

手軽にWebサイトを作成できるJimdoですが、手軽であるがゆえにコンテンツを追加しすぎてしまったり、逆に何を掲載していいか分からなかったり、運営していく上での悩みは尽きません。

そんなJimdoのリメイクを担当するプロのWeb制作者は、依頼を受けた際にどこから手を付けるのでしょうか。これは担当者によっても様々かと思いますが、私の場合はいきなり色を変更したりコンテンツの配置を動かしたり、ということはしません。絵を描く時に下書きをする、料理をする前に下ごしらえをする、それと同じようにリメイクにも下準備があります。

Webサイトの目的を確認する

まずはじめに、Webサイトの目的を確認します。これは非常に大切な工程です。「Webサイトを作る」ということが目的になってしまっている方が多くいらっしゃいますが、Webサイトはあくまで「手段」であり、それを使って何がしたいのかという「目的」があるはずです。目的をはっきりさせることで、この写真は必要か、この色でいいのか、といったことを判断するための指標ができます。

実際のリメイクでは「ヒアリングシート」というものを使用して、以下のような項目を書き出してもらっています。

  • どのようなWebサイトにしたいか
  • 業種
  • 事業内容
  • ターゲットの年齢
  • ターゲットの性別
  • 商品・サービスの特徴
  • 期待する効果
  • コーポレートカラー
  • コーポレートカラーを言葉にすると(優しい、信頼感がある、など)
  • 参考URL
  • 良いと思うポイント

これらをはじめに明文化することで、ゴールとなるWebサイトの方向性が見えてきます。実際にWebサイトを触りはじめる前に、ぜひじっくりと考えて書き出してみてください。

Webサイトの化粧を落として "すっぴん" にする

目的が明文化できたらJimdoの操作に入ります。といってもはじめから大きな変更をするわけではなく、まずは余計な装飾や色付けを解除し、できるだけフラットな状態にします。Webサイトに施された化粧を落として、いわば”すっぴん"の状態にするのです。

例えば下図のようなWebサイトがあるとします。やや極端に見えるかもしれませんが、実際にあったケースを元に紹介しています。太字や大きな文字、赤字などが混在しており、文字の左寄せ、中央揃えなどもバラバラです。これらをすべて初期設定に戻します。

文字の大きさや色、左寄せ/中央揃えなどが混在している

初期設定に戻すのは簡単です。コンテンツをクリックしてメニューを表示させたら、文章全体を選択した状態で、消しゴムのアイコン「設定解除」をクリックします。

文章を選択した状態で「設定解除」をクリック

コンテンツがたくさんある場合はこの操作を繰り返します。装飾をすべて外すと下のような状態になりました。やや味気ない感じがするかと思いますが、今の時点ではそれぐらいがちょうどいいでしょう。

文字設定が解除されてシンプルな表示になった

テーマカラーもいったん白黒に

Jimdoのテンプレートにはあらかじめテーマカラーが設定されていますが、これをそのまま使用している方が多く見られます。このテーマカラーもいったん白黒にしてしまいましょう。ただし、「うちはコーポレートカラーが決まっているから絶対この色にする必要がある」という方はそのままで構いません。特に意味もなくなんとなく色を設定している方は、以下の操作に従ってカラー設定を黒にしてください。

「管理メニュー」→「デザイン」の順にクリック

デザインメニューから「スタイル」をクリック

スタイルメニューに入ると、マウスポインタがハケのようなアイコンに変わっているはずです。色を変更したい箇所(今回のサンプルでは大見出し)をクリックします。

するとページ上部に、フォントや文字の大きさ、色などを設定するメニューが現れますので、「フォントカラー」をクリックして色を黒に設定します。

変更したい箇所をクリック

上部にスタイルを設定するメニューが現れる

「フォントカラー」をクリックする

カラーパレットから黒を選択する

見出しの色が黒に変更されたことを確認したら、ナビゲーションメニューの色も黒に変更します。

同様にナビゲーションメニューの色も黒に変更する

これでリメイクの下地作りは完了です。はじめの状態に比べると全体的にすっきりしました。

今の状態ではWebサイトとして魅力的な状態とはいえませんが、家のリノベーションなどでもまずは既存の住宅を解体していくところから始めます。これと同じように、余計な装飾をそぎ落とし、色のない状態にすることからリメイクは始まります。

一度まっさらな状態にしてからはじめるほうが効率的

せっかく作り上げてきたWebサイトをどんどんリセットしていくのは勇気がいることです。ただ、リメイクをする上ではできるだけ大胆になることがコツです。スクラップアンドビルドという言葉がありますが、崩れたバランスを無理に立て直すよりも、一度まっさらな状態にしてから組み上げるほうが、はるかに効率的です。本コラムでは全12回に渡りその組み上げ方を公開し、最終的に皆さまがJimdoのリメイクを「自分でできる」ようになることを目標としています。

次回は、フォントの選択とサイズ設定のコツ、またその操作方法について解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/6/18~2017/6/24]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!