Photoshopが使えるとこんなことができる! 【Web用素材】

Photoshopが使えるとこんなことができる! 【Web用素材】

こんにちは、トーモです。

Photoshop(フォトショップ)って聞いたことはあるけど、実際どんなことができるんだろう?

これからPhotoshopを始めたい方にとって、何ができるのかって知りたいことですよね?

だってPhotoshopが安価に使えるようになったからといっても、始めるにはそれなりにお金が必要になります。こんなことができる!ってメリットが分かっていないとお金を出すのもためらっちゃいます。

何ができるの?ってことについて、ざっくりとはこちらのページでご紹介していますので、参考にしてください。

Photoshopの基礎知識を覚えよう 「ワークスペース編」

今回はそのなかからWebデザインについて書きたいと思います。

Webデザインとは、一言でいうとホームページなどのWebサイトの見た目に関する全てをつくることです。

サイトのカラーだったり、文字だったり、画像などのレイアウトを考えてそれを形につくりあげていきます。

サイトを訪れる人は、検索などからサイトをみつけて訪れた際に、一瞬でこのサイトを見るかどうかを判断します。ある研究によると僅か2.6秒ほどで第一印象が決まるそうです。

あなたもそうですよね? パソコンやスマホで何か情報を探しているとき、たくさんのサイトが出てきますがまずは第一印象で読むかどうか決めませんか?

この第一印象でユーザーの心をグッと掴まなければ、他のサイトに去って行ってしまいます。

第一印象で重要なのはずばり「見た目」です。

ユーザーがパッと見て「なんか良い感じ」と思ってもらえるか、「うーんしょぼい・・」って思われちゃうか。

そして「見た目」を大きく印象づけるのは画像です。文字や動画はじっくり見ないと良し悪しを判断できませんので、パッとみれる画像が第一印象をほぼつくると言っても間違いじゃありません。

画像はサイトをつくる上でのWeb用素材といえますが、この素材のクォリティをあげていけば、プロがつくったようなサイトになります。逆に画像がほとんど無かったり、クォリティが低い画像しか貼られていないと、素人っぽくなってしまい「うーんしょぼい・・」になってしまいます。

ここではPhotoshopでWeb用素材をつくる重要性についてご紹介していきたいと思います。

スポンサーリンク



アイキャッチ画像が何よりも大切!

ホームページでもブログでも見る人を一瞬で惹きつけるためには「アイキャッチ画像」が何よりも大切になります。

アイキャッチ画像とは、見る人の興味を瞬時に引きつけるための画像です。このページでは一番上にある「Photoshopが使えるとこんなことができる!」という文字が書かれた画像です。

サイトを訪れた際にすぐに目に付く場所に大きくインパクトのある画像を配置することで、見る人の関心を引きつけてくれます。

と同時に、そのページでは「何について書かれているのか?」、「どんなことに役立つのか」という内容が連想されるようなページの顔になるべきものです。

例えば野菜を売っているサイトだったら美味しそうな野菜の写真がバーン!と出てたり、家具についてのページだったらおしゃれなテーブルなどが入っていたりなどです。

そういった写真に加えてページ内容をアピールする文字を加えたものがアイキャッチ画像になります。

キレイな写真と適切な文字を使うのはもちろんですが、それだけでは足りません。そこをPhotoshopでデザインして見る人の印象に残るようなかたちに作ってあげる必要があります。

同じ写真・文字を使っていても、Photoshopで加工するだけで下の写真のように全然別物になってきます。

Photoshopフォトショップ アイキャッチ画像 大切

どうでしょう? 未加工のものはなんだかさびしい感じで物足りなくないですか?

Photoshopを使って文字の大きさを変えたり、背景に色をつけたりすることでこんなに印象が変わってくるのです。

サイトをつくるWeb用素材ってどんなのがある?

ではアイキャッチ画像のほかにサイトをつくるWeb用素材ってどんなのがあるのでしょう?

よく使われるものですと、例えば

バナー画像・・クリックするとほかのページに移る画像

 

Photoshopフォトショップ バナー画像 Photoshopフォトショップ バナー画像

見出し画像・・見出しに使う画像

 

Photoshopフォトショップ 見出し画像 サンプル

ボタン画像・・押すとアクションを起こせるボタンの画像

 

Photoshopフォトショップ ボタン 画像 Photoshopフォトショップ ボタン 画像

などなどです。

他にもたくさんありますが、Web用素材とは人でいうとアクセサリーのようなものです。おしゃれにカッコ良く、あるいは可愛く魅せるために大切なものになります。

もちろんユーザーが使いやすいのが前提です。やり過ぎると逆効果に。

Web用素材を簡単につくる方法

Web用素材をつくる時に全くのゼロからアイデアを出してつくろうとすると難しかったり時間もかかったりします。

より簡単につくる方法として、クオリティの高い素材を参考にするのがおススメです。

勘違いしないで下さいね。決してパクるのではありませんw パクってはダメです、絶対。

色づかいだったり文字の置き方だったり、デザインを決める重要な要素を参考にするのです。

Web用素材をつくる際によく勘違いをしている人がいます。それは、ゼロから独創的なものをつくろうとすることです。誰も作ったことがないようなオリジナリティ100%のデザインです。

「え?デザインってそういうものじゃないの?」って思われるかもしれませんが、違います。

Web用素材のような万人に見てもらうデザイン、つまり商業デザインは、独創的なものは逆効果になります。そういうのは決まって見ずらいです。

商業デザインは見る人が迷わずストレスなく分かりやすいように、ある程度決まったルールみたいなものの上に作られています。どうしても似たようなものになってしまう部分がありますが、それが逆に見ている人には馴染みやすく見やすいものになるからです。

ゼロから独創的なものをつくるデザインというのは、アーティストが何かを表現するためにおこなうもので、商業デザインとは全くの別物になります。

ですので、「自分は美的センスがないからなぁ」なんていう方も安心してください。商業デザインはルールに則ってつくれば誰にでもクオリティが高いものをつくることができます。

Web用素材をつくるうえで参考になるサイトをいくつかご紹介しますね。

■バナー画像 参考サイト

バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック!バナー作成の参考にご活用ください!

 

「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデ...

 

■見出し画像 参考サイト

 

Webデザインの“ブブン”を集めたブブンデザインアーカイブの見出しのカテゴリです。

 

■ボタン画像 参考サイト

 
これ以外にも「〇〇 デザイン 参考」などで検索すると各パーツの参考サイトが出てきます。

スキルを活かして稼ぐ

こういったWeb用素材をつくるのが好きな方は、ランサーズなどのクラウドソーシングで仕事をみつけることができます。

特にアイキャッチ画像やバナー画像の作成依頼が多いです。

ひとつの分野に特化してスキルを上達させていき、それに関する仕事を集中的にやって実績をつくっていくのも良い方法だと思います。

クラウドソーシング「ランサーズ」は、実績とスキルのあるフリーランスに仕事を発注できる仕事依頼サイトです。ロゴ作成、会社のネーミング、システム開発、ホームペー...

 

日本最大級のクラウドソーシング、クラウドワークス。実績のあるプロに依頼できるから安心クオリティーでどこよりも早くリーズナブル!ホームページ作成、アプリ・ウェ...

 

まとめ

今回は「Photoshopが使えるとこんなことができる」というテーマで、Web用素材についてご紹介しました。

Web用素材をつくる上では、ゼロから独創的なものをつくるのではなく、参考サイトなどから自分のイメージに近いものを見つけて、それをベースにつくっていくと早くクオリティの高いものがつくれます。

これからPhotoshopを始める方は、まずは参考サイトから気に入った画像をみつけて、できるだけそれを再現するようにマネをしてつくってみましょう。写真はどの位置にどれくらいの大きさで配置されているのかや、文字に影はついているのか、背景の色は何色でグラデーションがついているのかなどチェックしながら練習します。

繰り返しマネをして同じものをつくっていくうちに、バナー画像をつくる際の共通したルールみたいなものが分かってきます。

友人などでブログやホームページをもっている人がいたら、無料でWeb用素材をつくってあげるのも良い練習になりますよ!

今日はこのへんで。

それではまた!

 

スポンサーリンク