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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第6回 新機能!フォトエディターで画像の編集をしよう

エキスパートコラム

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

第6回:新機能!フォトエディターで画像の編集をしよう

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

2016年9月5日更新

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

閲覧数2,243views

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

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

前回のコラムではテーマカラーの選び方や組み合わせのコツについて解説しました。第6回目となる今回は、Jimdoに新しく追加された、画像編集機能「フォトエディター」について解説します。

画像をうまく活用できていないケースが意外と多い

画像はWebサイトに欠かせない要素です。Jimdoにも画像を魅力的に配置できるレイアウトが数多く用意されています。

では、そんな画像を誰もがうまく使えているかというと、意外とそうでもないのが実状です。私はこれまで数多くのJimdoサイトのリメイクに携わりましたが、画質の粗いものが掲載されていたり、大きさがバラバラであったりと、画像を綺麗に見せる使い方ができていないケースがよくあります。

その原因は、画像編集の難しさにありました。デジタルカメラやスマートフォンの普及により、誰でも簡単にデジタル写真を撮影する事ができるようになりましたが、その編集、つまり大きさを揃えたり、明るさを調整したりといった加工にはプロ用のツールが必須で、それらを使いこなすには専門知識も必要でした。

こうした状況を解決するための大きな一歩として、強力な画像編集ツール「フォトエディター」がJimdoに追加されましたので、今回はその機能についてご紹介します。

Webサイト用の画像加工に必要な、ほぼ全ての機能を備えている

それでは、さっそく使用方法を見ていきましょう。
Jimdoに画像をアップしたら、メニューの左下にある「画像を編集」ボタンをクリックし、フォトエディター画面に入ります。これまでは無かったボタンですが、小さいので見逃していた方も多いかもしれません。

フォトエディター画面に入ると、上部にたくさんの項目が並んでいます。画像に効果をつけたり、切り抜いたり、テキストを書き込むこともできます。いわゆる「おまけ」の機能ではなく非常にしっかりしたツールとなっており、基本的な画像編集に必要な機能はほぼ揃っていると言っていいでしょう。

上部のメニューには豊富な機能が並ぶ

実用的で楽しい「効果」を使いこなそう

このように豊富な機能を備えた画像編集ツールの中でも、まずおすすめしたいのは「効果」です。これは画像にフィルタをかけて、雰囲気や質感を変える機能です。こういったフィルタ機能を備えたサービスとしてはInstagramが有名ですが、Jimdoでも「効果」を使うことで、なんでもない画像も雰囲気のある画像に変えることができます。

画像に様々なフォルターをかけられる「効果」機能

また、こうした機能には「フィルタがかかりすぎてわざとらしくなる」というデメリットがつきものですが、Jimdoの「効果」機能では、フィルタのかかり具合を調節することができるので安心です。

効果の強さを調整することもできる

「切り抜き」を使用して画像の縦横比を揃えよう

そして、Jimdoサイトでよく見られるのが、画像の縦横比が揃っていない、というケースです。縦横比を揃えることは単純ですがとても重要で、これを徹底するだけでWebサイトの見栄えはずいぶん良くなります。

やや極端な例ですが、下のキャプチャをご覧ください。画像を横一列に並べたレイアウトが、画像の縦横比が揃っていないことで統一感のない印象になっています。

3枚の画像の縦横比が揃っていないため、ガタガタな印象

これを解決するには「切り抜き」を使います。フォトエディターのメニューから「切り抜き」を選択すると、様々な比率で画像を切り抜くことができます。任意の数値にすることもできますが、今回は「3:2」の比率で切り抜いてみます。

あらかじめ代表的な比率のプリセットが用意されている

3枚の画像を全てを同じ比率「3:2」で切り抜いたのが下のキャプチャです。切り抜き前に比べて統一感がでました。こういった「切り抜き」も専用のソフトを使用することなく、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/7/16~2017/7/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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