エキスパートコラム
Jimdoで魅せる日本語Webデザイン(全12回)
第6回:新機能!フォトエディターで画像の編集をしよう
執筆:服部 雄樹(株式会社服部制作室)
2016年9月5日更新
閲覧数4,153views
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だけで完結するのはとても魅力的な機能です。
画像の縦横比を揃えることで見やすくスッキリとしたレイアウトになる
画像加工はやりすぎない、縦横比やサイズの統一は徹底して
このように、画像編集の強力な助けとなってくれるフォトエディターですが、まだまだここでは紹介しきれない多くの機能があります。
豊富な機能ゆえに、つい色々な加工をしたくなってしまいますが、あまりやり過ぎると収集がつかなくなってしまいますので、慣れるまでは軽い味付け程度にしておくのが無難かもしれません。「やりすぎない」のがポイントです。 ただし、縦横比やサイズの統一は徹底したほうが見栄えの良いサイトになりますので、この辺りのバランスに気をつけながら、ぜひ楽しんで画像編集を行ってみてください。
画像が綺麗に配置できたら次は文字です。次回は、読みやすい文章のレイアウト方法について解説します。
HTML&CSSとWebデザインが 1冊できちんと身につく本
「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作のきほんが学べます!ライブ感のあるチュートリアル学習により、まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。