INQUIRY BLOG

福岡県在住、フリーランスWebデザイナー&ディレクターのブログです。

福岡県在住、フリーランスWebデザイナー&ディレクターのブログです。

WEBデザイナーがカメラをやってよかったこと

後藤です。
無趣味だった私がカメラにハマって2年半が経ちました。
私の周りは今空前のカメラブームで、仕事仲間ではカメラを持ってない人はいないんじゃないかくらいです。 今回はWEBデザイナーという私の視点でやってよかった事や、役立った事などをご紹介します。

インスピレーションについて

写真を撮る時は、アイデアやインスピレーションを大事にしてます。
色々な写真家の方の写真も多く見ますし、WEBサイトをデザインや企画をする時とも結構似ていて、発想力を常に高めることができているかと思います。

構図・バランスについて

写真では「三分割法」や「日の丸構図」「シメントリー構図」などがあります。WEBデザインでもサイトやバナーなどのデザインで、必ずレイアウトを考えます。
写真を始めてから、よりレイアウトやバランスを意識するようになりました。

色味について

撮影時はどんな色味が入っているか、どのくらいの明るさで撮ろうか、また現像時にどういう色味でレタッチしようかなど、色を考えます。
デザイン時には一つ一つの色を理解し、より考えて色を選定するようになりました。

Adobe Lightroomについて

普段仕事ではAdobe Photoshopでデザイン制作しています。
写真を始めてから「Lightroom」を使うようになりました。WEB系で普段からAdobeに慣れている人は、Lightroomもスムーズに使えると思います。
また案件でカメラマンさんとのやり取りでも多少「Lightroom」の知識があった方が良いです。

案件について

コーポレートサイトやECサイトでカメラマンさんの予算がない時は自分で撮影する機会が増えてきました。 よく写真をやると単価が上がるといいますが、案件規模や撮影内容よってはきちんとカメラマンさんに依頼した方が良いケースが多々あります。
クライアントや予算によって、フリー素材やストックフォトしか使用できない場合などは、自分で撮れるようにはしていきたいと思います。

まとめ

今回はWEBデザイナーという仕事と写真を繋げましたが、実際は写真がある日常は単純に楽しいです。 旅行も行きたくなりますし、自分の考え・視野が確実に広がりました。

自分はアンダーめ写真が好きで、作品撮りをしてます。
写真は無理せず、自分のペースで今後も楽しんでいきます!

Instagram

coten

【商用利用可】無料、有料サイトまとめ 8選

後藤です。 コーポレートサイトからサービスサイト、ネットショップまで、
WEBサイト制作における要素で、大事にしなければならないのが写真です。写真次第でイメージ・デザインが全く違う見え方・伝わり方になるほど重要な要素です。

案件によってカメラマンさんに依頼する予算があれば良いのですが、
どうしても予算がない場合に、写真素材サイトの出番となります。

写真素材サイトの中でも「無料・有料」「商用利用可能」「国内・海外」と用途によって様々な写真素材サイトがあります。
今回はそんな中よく使うサイトをご紹介いたします。

無料

無料で利用できるので、気軽に利用できます。
しかしフリー=無料といってもどのサイトでも自由にどこでも写真を使用できる訳ではありません。個人利用やロイヤルティフリー表記など必ず各サイトの利用規約等をご確認ください。

【国内】無料写真素材 写真AC

イメージ写真・物撮写真・テクスチャやパーツなど幅広く揃うサイトです。
基本無料ですが、ダウンロード数の制限の解除や複数の写真をまとめてダウンロードできるプレミアム会員プランもあります。
https://www.photo-ac.com/

【国内】ぱくたそ

幅広いジャンルの写真が揃うサイトです。特徴としてはコラボ企画などで少しひねった面白い写真や人物写真が多い印象です。人物写真はモデルリリースとそうでないものがありますので、規約ページをご確認ください。
https://www.pakutaso.com/

【国内】food.foto

料理に特化した写真が揃うサイトです。背景が白バックが多いので、合成などもしやすいです。
https://food.foto.ne.jp/

【海外】UNSPLASH

画像の権利はCC0で商用利用無料です。特徴はクオリティが高い写真が多数あります。風景写真などはサイトの背景やメインイメージなどインパクトを訴求できるな写真が多いです。
https://unsplash.com/

【海外】Pixabay

こちらもCC0で商用利用無料です。120万点以上の数があり、日本語検索もでき、基本的にある程度求めている写真がサクサク見つかります。
https://pixabay.com/

有料

よく仕事をしているとあるのが、有料ストックフォトサイトの利用です。
無料だとトラブルを心配したり、他のサイトで写真素材が被ったりするので、低い予算でバリエーション豊富な写真の中からセレクトして使用できます。

【国内】PIXTA

国内で有名な有料写真素材サイトです。ストックフォトの予算が出ている場合、国内の人物写真やイメージ写真も幅広く揃います。
https://pixta.jp/

【海外】Shutterstock

海外のサービスサイトなので、国内人物写真は少ないですが、イメージ写真などはPIXTAなどより揃う印象です。
https://www.shutterstock.com/

【海外】Adobe Stock

Adobeのストックフォトサイトです。クリエィティブ系のアプリとの連動や画像数が多いのが印象です。
また、月額プランも10点3,480円は他サイトに比べると組みやすいです。
https://stock.adobe.com/jp/

まとめ

写真が重要な今、無料サイト・有料サイト用途を考えて使われると良いかと思います。
私は3年前に写真を始めて、簡単な物撮りを最近するようになりました。

案件を企画から提案する時に、予算によってどこまでのクオリティの写真が必要なのかを見極め、 カメラマンさんへの依頼やストックフォトサイトの使用を検討することが重要です。

楽天ショップ 2018デザイントレンドまとめ

後藤です。 最近通販(EC)のお仕事が特に多いです。 今回は楽天で気になったサイトをカテゴリ別でご紹介いたします。 今のトレンドなど調べる時の参考に。

すっきりとしたシンプルデザイン

Habit(アンドハビット)

BOTANIST(ボタニスト)などのブランドがあり、常に楽天では総合ランキングに入っています。 トップページでは「ニュース・トピックス」「カテゴリ」「価格帯」がシンプルに見やすく配置されています。
https://www.rakuten.ne.jp/gold/kobe-beauty-labo/

お風呂のソムリエSHOP

大きな余白を取っており、一つ一つのキャッチに目がいきました。 また、生活とリンクさせる見せ方や特集が多く、遷移させたくなるバナーなどまとまっています。
https://www.rakuten.ne.jp/gold/bathlier/

大型スライドを採用しているサイト

JIGGYS SHOP(ジギーズショップ)

大型のスライドでカテゴリ・商品を紹介されています。モール系の商品カテゴリが多いアパレル系などは、ゴチャとしてしまう印象ですが、綺麗にカテゴリ分けもされていながら、インパクトもあります。
https://www.rakuten.ne.jp/gold/jiggys-shop/

パフォーマンス・ウォーター VOX

サイト全体はシンプルな作りですが、スライドバナーのキャッチに目がいき、上手くスライドをいかしています。商品ページも写真やエリアを大きく取り、しっかりと作りこまれています。
https://www.rakuten.ne.jp/gold/vox-official-store/

カード・グリット・記事風サイト

ハイ食材室

トップページは、記事風のレイアウトで、商品ページも読み物的な形で構成されています。 写真も綺麗で、モール系では珍しい作りのサイトです。
https://www.rakuten.ne.jp/gold/hi-syokuzaishitu/

scope スコープ

トップページに珍しい縦バナーも設置された、記事風デザインです。商品ページも記事風で写真や動画も効果的に使われてます。
https://www.rakuten.co.jp/scope/

動画やイメージを前面に押し出すサイト

完全国産の美陽堂

サイトのデザイン・商品力・写真イメージに圧倒されました。1つの商品に対して、ブランディング・イメージ訴求がしっかりとされています。
https://www.rakuten.ne.jp/gold/biyoudou/

お布団工房

ファーストビューに企業コンセプト動画を前面に押し出しています。トップページにコンセプトやカテゴリが見やすく配置されています。
https://www.rakuten.ne.jp/gold/e-futon-kobo/

まとめ

  • よりブランド色を出したり、商品力に注力するサイトが増えている。
  • 生活をイメージさせる、写真やコンテンツをしっかり作りこむサイトが増えている。
  • 商品ページで説明する為、トップページはシンプルなデザインのサイトが増えている。
  • よりWEBの構築技術を導入するサイトが増えている。

楽天ショップ オープンまでに行う12のこと

先日お仕事で、楽天ショップのデザインから構築・オープン作業までを担当しました。
今回は楽天のオープンまでにどのような項目があるか、制作側をメインに手順をご紹介します。

楽天のオープン作業とは、あくまで楽天goldを使わない仕様の流れとなります。

楽天goldで自由にサイトを作る前に、きちんと楽天の規約通りのサイトを作り上げる必要があります。

その後、LP(ランディングページ)の作り込みやgoldで作ったサイトの組み込みなどを行っていきます。

制作の前に…

1 コンセプト決め

まず、ショップの方向性をクライアントと打ち合わせをします。
オープン時の商品数や、今後どの様な商材を販売していくかなどを話し合い、ショップ全体のこだわりや伝え方など、全体のコンセプトを決めていきます。
最初にここでブレてしまうと、ショップの方向性がなくなっていき、運用に支障が出てきます。

2 プラン選び

楽天には「メガショッププラン」「スタンダードプラン」「がんばれ!プラン」「ライトプラン」の4つのプランがあります。プランによって、月額出店料やシステム料など用途が違いますので、売り上げ目標や楽天のエリア担当者と相談しながら決めていくと良いです。 契約期間がありますが、プランは運用中にも変更できます。

www.rakuten.co.jp

3 店舗情報設定

契約をすると楽天RMS(管理画面)にログインができるようになります。
基本的な設定から配送・決済、トップページ・商品ページなどの設定も行います。
最初にログインしたRMSトップページに「初めての店舗サイト作り」エリアがありますので、ステップを踏みながら、設定していきます。

4 カテゴリ設定

後で追加や変更もできるのですが、商品数が増えるほどカテゴリも増えていくので、今後を見据えたカテゴリ分けや設定が必要です。

5 画像ファイル名・商品管理番号のルール決め

楽天ではRMS内にR-Cabinetという画像アップロードツールがあり、ファイル名は全角25文字/半角50文字以内と文字制限などもあります。
商品管理番号は商品ページのURLなる部分で、一度決めると後で変更ができません。ファイル名・商品管理番号など、今後運用しやすいようにルールを最初に決めていきます。

審査前に…

すぐにgoldの自由なデザインのトップページでオープンしたい場合は、
審査前に、デザイン・コーディング・設定まで行っておくと、審査後スムーズにオープンへができます。

6 PC・スマートフォンデザイン制作

楽天でも最近はレスポンシブサイトが増えていますが、PC・スマートフォンと分けて商品イメージや訴求をしっかりと見せていくことを考えると、今の所はデバイスは分けて構築しています。

7 PC・スマートフォンコーディング

通常のWEBサイトのようにコーディングをしていけば良いのですが、楽天ではPCの場合、各パーツをiframe化して表示させるのが主流なので、パーツをファイル別で準備しておきます。

8 商品ページデザイン制作

商品ページをLP(ランディングページ)で注力して制作する場合はこの段階で進めます。商品数が多い場合はテンプレートをいくつか作り、写真やコピーだけ差し替え量産していくやり方もあります。

9 楽天RMS商品ページ登録・FTP設定

上記のLP完成後、商品ページの登録をしていきます。

価格・在庫設定・カテゴリ登録などもありますが、表示されるコンテンツエリアには、「PC用販売説明文」「スマートフォン用商品説明文」「モバイル用商品説明文」3つがあります。
スマートフォンは画像のimgタグは10枚しか設置できないのが辛いです。以前は3枚でした。

10 審査用指定画像パーツ制作・設定

審査にはPC・スマートフォンはもちろん「header」「footer」「サイド」に何pxのバナーやボタンを設置しなければならないなどルールが細かく決まっています。「初めての店舗サイト作り」の項目にそって進めていけば問題ありません。

審査クリア後…

審査クリア後は、goldで制作していたサイトを楽天に組み込んでいく作業となります。

11 楽天RMS内トップページ設定・header・footer・サイドナビ設定

RMS内でトップページの設定をしていきます。
通常のトップページURLは、「https://www.rakuten.co.jp/ショップURL/」になりますが、goldを使用すると「https://www.rakuten.ne.jp/gold/ショップURL/」のURLになるので、リダイレクト設定を行い、トップページにgoldが表示されるようにします。
また、header・footer・サイドナビにiframeを設置し、ページ全体で表示されるように設定していきます。

12 スマートフォン設定・リダイレクト

スマートフォンの場合は、トップページから商品ページ・詳細に入ると、楽天のテンプレートが表示される形式になります。トップページはgoldサーバー内に、「sp」などディレクトリを作り、javascriptなどでデバイス判定でリダイレクト設定をしていきます。

まとめ 最終調整・オープン

以上で、制作から、審査、審査後のサイト組み込みなどを行いました。 こちらでPC・スマートフォンのトップページが設定され、商品ページも作り込んで、オープンができます。 ECは運用が大事ですので、ここからどういったコンテンツや施策をしていくかが大事かと思います。

はてなブログに引っ越しました

独立してから書いていたブログを「Tumblr」から「はてなブログ」に引っ越しをしました。

最近は記事だけでお問い合わせも頂いていたので、移行するか迷いましたが、 今後の少しでもWEBやフリーランス・EC周りの投稿を増やして行きたかったので、思いっきって移行しました。

Tumblrのサイトはそのまま残し、時間空いたときに、 誘導だけしようと思います。

はてなはこの時期SSL対応が遅れていて、微妙な時期となってしまいましたが、 これから、何卒よろしくお願いいたします。

Copyright © INQUIRY BLOG AllRights Reserved.