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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 特別編 魅せるデザインのポイントをおさらいしよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

特別編:魅せるデザインのポイントをおさらいしよう

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

2017年3月6日更新

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

閲覧数836views

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

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

今回は、特別編としてこれまでの連載を振り返りながら重要なポイントをおさらいしてきましょう。

第1回~第3回
フォント設定やレイアウトなど、大枠の設計が何よりも大切

第1回~第3回は、Jimdoを使用したWebサイト制作の準備として、大枠のレイアウト設計について解説しています。

まず、Jimdoを使ってWebサイトを制作する際に非常に重要になるのがフォント(文字)の設定です。日本語と英語の特徴の違いに触れながら、オススメの文字サイズ設定などを紹介しました。文字サイズが整うだけでWebサイト全体の印象はぐっと引き締まります。

また、Webサイトの顔となるトップページの役割や使いやすいレイアウト手法、詳細ページのレイアウトの組み立て方、Jimdoの便利な機能などを紹介し、大枠の設計についてどのように考えるべきかをまとめています。レイアウト設計はコンテンツを入れる箱としてとても重要で、箱が整っていれば全体が大崩れすることはありません。Webサイトを制作するはじめの一歩として、参考にしてみてください。

第4回~第7回
ビジュアル要素や色使い、文章の魅せ方で見やすいWebサイトに

第4回~第7回は、Webサイト内の各コンテンツやパーツを綺麗に魅せる手法について解説しました。

メインビジュアルの選び方や役割、画像素材の入手方法についての紹介と、番外編として今後活用が広がっていくであろう、動画を使用した手法についても触れています。動画は画像よりも多くの情報を伝えることができます。Jimdoでは動画を使った表現も簡単に実現できますので、ぜひ挑戦してみましょう。

また、全体のイメージに大きく影響するカラーリングの考え方や、色の設定に迷ったときに助けとなる便利なWebサービスも掲載しています。色は人間の心理に大きな影響を与えるため、しっかり考えて設定するべきでしょう。各ページの中身となる画像や文章についても、どうすれば分かりやすいWebサイトにできるのか、Jimdoの新機能と合わせて紹介しています。どれもすぐに活用できる方法ばかりなので、見やすいWebサイト作りの参考にご活用ください。

第8回~第11回
神は細部に宿る?ディテールに気を配れば印象は大きく変わる

第8回~第11回は、Webサイトの印象を大きく変える、細部をデザインする手法を解説しています。

デザインの基本原則について簡単に紹介し、それをWebサイトにどう応用するかを解説しました。デザインの原則に則って配置やサイズ設定を調整するだけで整った印象になり、情報の伝達もスムーズになります。

また、手軽にイメージを変えられるWebフォントの設定方法や、ボタンの設置方法、余白の設定方法など、Jimdoの細かい機能についても紹介し、どこに気をつければ美しいWebサイトになるのかのポイントを解説しました。これらの細かい部分までしっかりと気を配ってデザインに落とし込んでいくことで、Webサイト全体の印象はぐっと良くなります。皆さまのWebサイトにも応用してください。

まずは楽しみながら触ってみることが良いWebサイトへの第一歩

Jimdoは自分で編集ができることが最大の特徴です。それゆえに設定に迷ってしまうことが多いのも事実ですが、ぜひ楽しみながら色々と触ってみてください。ここでご紹介した基本的なポイントをおさえながら編集していただければ、きっと最適な設定方法やレイアウトのポイントが見つかるはずです。

また、ご自身で触って作っていくことで愛着が生まれます。どれだけデザインが優れていてもWebサイトは使われなければ意味がありません。本コラムが、皆さまが愛着を持って長く使えるWebサイト作りの一助になることを願っています。ありがとうございました。

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

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

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

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

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

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

HTML&CSSとWebデザインが 1冊できちんと身につく本

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

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

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ