こんにちは、トーモです。
Photoshop(フォトショップ)って聞いたことはあるけど、実際どんなことができるんだろう?
これからPhotoshopを始めたい方にとって、何ができるのかって知りたいことですよね?
だってPhotoshopが安価に使えるようになったからといっても、始めるにはそれなりにお金が必要になります。こんなことができる!ってメリットが分かっていないとお金を出すのもためらっちゃいます。
何ができるの?ってことについて、ざっくりとはこちらのページでご紹介していますので、参考にしてください。
Photoshopの基礎知識を覚えよう 「ワークスペース編」
今回はそのなかからWebデザインについて書きたいと思います。
Webデザインとは、一言でいうとホームページなどのWebサイトの見た目に関する全てをつくることです。
サイトのカラーだったり、文字だったり、画像などのレイアウトを考えてそれを形につくりあげていきます。
サイトを訪れる人は、検索などからサイトをみつけて訪れた際に、一瞬でこのサイトを見るかどうかを判断します。ある研究によると僅か2.6秒ほどで第一印象が決まるそうです。
あなたもそうですよね? パソコンやスマホで何か情報を探しているとき、たくさんのサイトが出てきますがまずは第一印象で読むかどうか決めませんか?
この第一印象でユーザーの心をグッと掴まなければ、他のサイトに去って行ってしまいます。
ユーザーがパッと見て「なんか良い感じ」と思ってもらえるか、「うーんしょぼい・・」って思われちゃうか。
そして「見た目」を大きく印象づけるのは画像です。文字や動画はじっくり見ないと良し悪しを判断できませんので、パッとみれる画像が第一印象をほぼつくると言っても間違いじゃありません。
画像はサイトをつくる上でのWeb用素材といえますが、この素材のクォリティをあげていけば、プロがつくったようなサイトになります。逆に画像がほとんど無かったり、クォリティが低い画像しか貼られていないと、素人っぽくなってしまい「うーんしょぼい・・」になってしまいます。
ここではPhotoshopでWeb用素材をつくる重要性についてご紹介していきたいと思います。
スポンサーリンク
アイキャッチ画像が何よりも大切!
ホームページでもブログでも見る人を一瞬で惹きつけるためには「アイキャッチ画像」が何よりも大切になります。
アイキャッチ画像とは、見る人の興味を瞬時に引きつけるための画像です。このページでは一番上にある「Photoshopが使えるとこんなことができる!」という文字が書かれた画像です。
サイトを訪れた際にすぐに目に付く場所に大きくインパクトのある画像を配置することで、見る人の関心を引きつけてくれます。
と同時に、そのページでは「何について書かれているのか?」、「どんなことに役立つのか」という内容が連想されるようなページの顔になるべきものです。
そういった写真に加えてページ内容をアピールする文字を加えたものがアイキャッチ画像になります。
キレイな写真と適切な文字を使うのはもちろんですが、それだけでは足りません。そこをPhotoshopでデザインして見る人の印象に残るようなかたちに作ってあげる必要があります。
同じ写真・文字を使っていても、Photoshopで加工するだけで下の写真のように全然別物になってきます。

どうでしょう? 未加工のものはなんだかさびしい感じで物足りなくないですか?
Photoshopを使って文字の大きさを変えたり、背景に色をつけたりすることでこんなに印象が変わってくるのです。
サイトをつくるWeb用素材ってどんなのがある?
ではアイキャッチ画像のほかにサイトをつくるWeb用素材ってどんなのがあるのでしょう?
よく使われるものですと、例えば
見出し画像・・見出しに使う画像

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


などなどです。
他にもたくさんありますが、Web用素材とは人でいうとアクセサリーのようなものです。おしゃれにカッコ良く、あるいは可愛く魅せるために大切なものになります。
Web用素材を簡単につくる方法
Web用素材をつくる時に全くのゼロからアイデアを出してつくろうとすると難しかったり時間もかかったりします。
より簡単につくる方法として、クオリティの高い素材を参考にするのがおススメです。
勘違いしないで下さいね。決してパクるのではありませんw パクってはダメです、絶対。
色づかいだったり文字の置き方だったり、デザインを決める重要な要素を参考にするのです。
Web用素材をつくる際によく勘違いをしている人がいます。それは、ゼロから独創的なものをつくろうとすることです。誰も作ったことがないようなオリジナリティ100%のデザインです。
「え?デザインってそういうものじゃないの?」って思われるかもしれませんが、違います。
Web用素材のような万人に見てもらうデザイン、つまり商業デザインは、独創的なものは逆効果になります。そういうのは決まって見ずらいです。
商業デザインは見る人が迷わずストレスなく分かりやすいように、ある程度決まったルールみたいなものの上に作られています。どうしても似たようなものになってしまう部分がありますが、それが逆に見ている人には馴染みやすく見やすいものになるからです。
ゼロから独創的なものをつくるデザインというのは、アーティストが何かを表現するためにおこなうもので、商業デザインとは全くの別物になります。
ですので、「自分は美的センスがないからなぁ」なんていう方も安心してください。商業デザインはルールに則ってつくれば誰にでもクオリティが高いものをつくることができます。
Web用素材をつくるうえで参考になるサイトをいくつかご紹介しますね。
■バナー画像 参考サイト
■見出し画像 参考サイト
■ボタン画像 参考サイト
スキルを活かして稼ぐ
こういったWeb用素材をつくるのが好きな方は、ランサーズなどのクラウドソーシングで仕事をみつけることができます。
特にアイキャッチ画像やバナー画像の作成依頼が多いです。
ひとつの分野に特化してスキルを上達させていき、それに関する仕事を集中的にやって実績をつくっていくのも良い方法だと思います。
まとめ
今回は「Photoshopが使えるとこんなことができる」というテーマで、Web用素材についてご紹介しました。
Web用素材をつくる上では、ゼロから独創的なものをつくるのではなく、参考サイトなどから自分のイメージに近いものを見つけて、それをベースにつくっていくと早くクオリティの高いものがつくれます。
これからPhotoshopを始める方は、まずは参考サイトから気に入った画像をみつけて、できるだけそれを再現するようにマネをしてつくってみましょう。写真はどの位置にどれくらいの大きさで配置されているのかや、文字に影はついているのか、背景の色は何色でグラデーションがついているのかなどチェックしながら練習します。
友人などでブログやホームページをもっている人がいたら、無料でWeb用素材をつくってあげるのも良い練習になりますよ!
今日はこのへんで。
それではまた!