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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第8回 カギは画像にあり!プロが必ずやっている整列テクニック

エキスパートコラム

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

第8回:カギは画像にあり!プロが必ずやっている整列テクニック

執筆:服部 雄樹(株式会社服部制作室)

2017年11月20日更新

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

閲覧数1,642views

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

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

第8回目となる今回は、画像をバランスよく魅せるコツについて解説します。

「素人っぽい…」それは画像のせいかも!?

皆さまは、Webサイトに掲載する画像をどのように用意しているでしょうか。デジカメで撮影した画像、カメラマンに撮ってもらった画像、素材サイトから購入した画像などをはじめ、自分でスマートフォンで撮影した画像を使用するケースもあるかもしれません。

そして、さまざまな経路で入手した画像をWebサイトに掲載していくと、大きさや画質、縦横比などがバラバラになってしまうこともよくあるでしょう。しかし、ここでバラバラのまま掲載するか、少しの手間を加えるかが、Webサイト全体の印象を決める大きな分かれ道となります。「どことなく素人っぽい…」それは画像のせいかもしれません。

特に気をつけたい「縦横比」とは

特に、Webサイト全体のバランスに大きな影響を与えるのが画像の「縦横比」です。縦横比とは、画像の長辺と短辺の比率のことで、アスペクト比とも呼ばれます。代表的な比率に「4:3」「3:2」「16:9」などがあり、一般的なカメラであればだいたいこのいずれかの比率で撮影します。Webサイトに掲載する際に全てが同じ縦横比で揃っていれば問題はないのですが、混在しているとそれだけで雑然とした印象を与えます。

画像の加工にはフォトエディター機能を活用しよう

そんな時に活躍するのがJimdoのフォトエディター機能です。通常、画像の加工には専用のソフトが必要ですが、この機能を使えば画像を切り抜いたり方向を変えたり、フィルタをかけるなどのさまざまな加工がJimdoの機能だけで実現可能です。

非常に強力なツールですが、起動するボタンが少しわかりにくいためか、意外と活用していない方が多いようです。この機会に使い方を学んでおきましょう。

今回はフォトエディターを使用して、3枚の画像の縦横比を「3:2」に変更します。まずは、Jimdoの編集画面に入り、画像をクリックします。そして画像の編集メニューの一番左、「画像を編集」と書かれたカメラのシャッターのようなアイコンをクリックします。

すると画面上にフォトエディター機能が立ち上がります。上部に様々な編集メニューを表すアイコンが並んでいますが、今回はこの中から「切り抜き」を使用します。

「切り抜き」をクリックすると比率を選択する画面になります。この中から「3:2」を選択し、構図を決めたら「適用」をクリック、次の画面で表示を確認して問題がなければ保存します。

一番左の画像の縦横比が3:2に変更されました。

同じ要領で真ん中の画像の縦横比も3:2に変更しましょう。

いかがでしょうか。画像の縦横比を揃えるだけで整然とした印象に変わります。細かいことのようですが、私がリメイクを行う際には必ずこの作業を行います。リメイクといっても特殊なテクニックがあるわけではなく、こうした基本的なことを淡々と、手を抜かずに修正していくことが何より大切なのです。

大きさや構図も揃えるとさらに統一感が生まれる

また、画像の「大きさ」についても同じことが言えます。ショップ機能を使ったECサイトなどで画像の大きさがバラバラになっているケースがたまに見られますが、同じ大きさで統一した方が、ユーザーにとっては視線の動きがスムーズで使いやすいWebサイトになります。

さらに、これを発展させて全ての商品を「同じ構図」で撮影するというのも有効です。常に同じ場所で、同じカメラで、同じ位置から、できれば同じ時間帯に撮影をすると良いでしょう。こうすることでWebサイト全体に統一感が生まれます。

縦横比や大きさだけでなく、構図や撮り方を揃えることでさらに統一感が生まれる

デザインは、整列に始まり整列に終わる

デザインの基礎に「整列」という概念があります。これは文字どおり「整えて列べる」という意味で、何かをデザインする際には最も基本的でかつ重要な概念です。今回紹介した縦横比や大きさ、構図を揃えることは全てこの整列という考え方によるものです。

もし皆様がWebサイトの画像の配置に困った時は「整えて列べる」ことを意識してみてください。それだけで、スッキリ見やすいWebサイトに大きく近づくことになるでしょう。

次回はWebサイトのナビゲーションを整理するポイントについて解説します。お楽しみに!

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

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

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

株式会社服部制作室 代表取締役/Jimdo Expert
https://www.hattori-studio.jp/
https://www.template-labo.com/

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

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

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

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

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

コラム週間アクセスランキング[期間:2018/12/2~2018/12/8]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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