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

  1. TOP
  2. Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~ : 第3回 Webデザイン・レイアウトの基本をおさらい

エキスパートコラム

Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~(全6回)

第3回:Webデザイン・レイアウトの基本をおさらい

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年2月9日更新

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

閲覧数6,970views

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

"Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。

Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。

文章のレイアウトに手を入れてみよう

ホームページの基本は「文字・文章」ですが、いくつかのルールを適用すれば、格段に見やすいものとなります。 今回のコラムでは、以下の3つの項目に注目し、解説していきます。

文章量が多くなってきたときに、見やすく整える方法

改行がなく長い文章は、見ているだけで疲れてしまいます。相手に適切なリズムで読んでもらうためには、文章量や改行を意識し「段落」をつけるようにします。

3行から5行程度を目安に、意味がまとまった部分で区切り、文章を段落に分けると読みやすくなります。

段落の少ない文章は読みづらい

段落を足すことで読みやすくなった

文章の性質に応じて箇条書きや表組みをうまく活用する

[文章]の項目内で、箇条書きが出てきた場合は、リスト機能を使ってみましょう。文字で「・」を入力するのではなく、Jimdoでは機能として箇条書きのフォーマットが準備されています。

箇条書き

手動で「・」と打っていたものは、専用の機能で置き換える

該当のテキストを選択し、番号なしリストをクリックすると、箇条書きに変換される

表組み

会社概要の表や金額表など、一覧表にしたほうがわかりやすいようなものには、ぜひ表組みの機能を利用してみましょう。

項目を通常の文章のように列挙

同じテキストでも、表にするとわかりやすく比較もしやすい

表組みの裏技「Excel」を使って複雑な表組みを作る

Jimdoでは、表組みを簡単に作ることができますが、複雑な表組みは少々手間がかかります。Excelで作った表をそのまま貼れたらいいのに…と思ったことはありませんか?

Internet Explorerなど一部のブラウザでは、Excelからコピー&ペーストでJimdoに表をそのまま貼り付けることができます。

サンプルファイル:Excelで作成した表組みデータ

Excel上で表組みを作成し、コピーする

Internet ExlorerでJimdoにログインし、[文書]項目を挿入して貼り付けすると、Excelで作成したままの表が挿入される

しかし、この手法で貼り付けた表は、行の追加や削除など基本的な機能を含め、再編集がとても困難です。あらかじめExcel上で作り込んでから、コピー&ペーストしましょう。

※Google Chromeなど、一部のWebブラウザではこの機能を再現できない場合があります。また、Jimdoの内部機能のアップデートにより対応環境や、操作の挙動が変わる場合があります。

まとめ

前回に引き続き、小さな配慮の積み重ねで、ホームページのクオリティをより向上させていきましょう。ページを作ったあとは、ぜひテキストを見直してみてください。

  • 長い文章はほどよく段落で区切る
  • 箇条書きを効果的に使う。手動で「・」は打たない
  • 表組みは、比較や一覧表を表現するのに有効
  • 複雑な表組みはExcelを活用すると便利。しかし、再編集に弱いので注意

次回は、「外部サービスを利用して、カレンダーや翻訳機能などJimdoに存在しない機能を付け足す」と題して、カレンダーの挿入方法やホームページに翻訳機能をつける方法をご紹介します(つづく)。

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

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

10日でSEO&アクセスアップ Jimdoデザインブック

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

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