INQUIRY BLOG

ホームページ制作・デザイン事務所 INQUIRY(インクワイアリー)ブログ

ホームページ制作・デザイン事務所 INQUIRY(インクワイアリー)ブログ

私のフリーランスWEBデザイナーとしての仕事について

今年も残す所、数日になりました。
後藤です。
今年もブログをなかなか更新できませんでした、、、
そんな中ですが、来年でフリーランスとして独立をして5年目に突入します。
振り返ることではありませんが、今回は改めて自分の仕事について書きたいと思います。

フリーランスWEBデザイナーについて

一般的なフリーランスWEBデザイナーの主に大きい仕事は3つに分かれるかと思います。

デザイン

PC・スマホ・タブレット・アプリなどの各種デバイスに対してデザインをします。

コーディング

デザインを元に構築していきます。
最近はレスポンシブデザインでのコーディングが多いです。

ディレクション

代理店経由の案件ですと、既にディレクターが別いるケースが多いのですが、
直接の取引ですと、ワイヤーフレーム・構成書の作成や案件進行・提案などのディレクションまで行います。

得意な分野について

福岡問わず、世の中にはフリーランスWEBデザイナーはたくさんいます。
私は得意な分野を聞かれれば、真っ先に答えるのが「EC」です。
他のデザイナーの方とは少し違い、会社員時代の約半分は自社でサービスやコンテンツを持つ通信販売会社に勤めていましたので、現在もクライアントから多く求められるのがECの分野になります。

ECが得意なWEBデザイナーの仕事とは

案件のタイプで言うと、、、

ECサイト制作

サイトの新規立ち上げから、既に販売稼働しているサイトのリニューアルまで行います。
独自システムを使ったサイトから楽天・YAHOOなどのモールショップまで、
案件によってはデザイン制作のみ担当もあれば、モールの審査・立ち上げから最後の公開までを行う場合もあります。

ランディングページ制作

単品通販のランディングページ制作やイベントページ、モール内の商品ページ制作を行います。

サイト運営・運用

EC制作・運用に関わる業務(デザイン・構築・各種更新・メルマガ・他販促業務など)それに加えて現在は商品撮影も込みでパッケージサービスとしてクライアントへ提供しています。

まとめ

フリーランスのWEBデザイナーといえど、行なっている案件や分野は様々です。
最近感じるのは、自身に武器を持つことは重要だなと思います。
ECといえば、私を思い出して頂けるように、来年もこの武器を磨き続けたいと思います。

「フォトエッセイサイト」ローンチ

またかなり久々になってしまいました、
後藤です。

この度フォトグラファーの方と共に、フォトエッセイサイト立ち上げました。

se.REGARDER

サイト名「se.REGARDER」はフランス語で「自分の姿を見る」という意味になります。
最初に写真を始めた時に、撮った写真はその撮った自分自身が映るような気がしまして、
色々考えたところ一番この名前がピンときて決めました。

1.フォトエッセイサイトを立ち上げた訳

写真を初めて3年ほどが経ちました。
最近では仕事でも撮っていますが、写真への初めての入口が「作品撮り」でしたので、 常に目標を持って撮影しています。
今年初めには、写真展への参加やフォトウォークへの参加など色々な刺激を頂き経験できました。
その後も写真を撮り続けていましたが、次へのステップアップとしてより多くの方達に自分の作品を見て頂きたいと思い、自身の仕事でもあるWEBを使うことにしました。

2.フォトエッセイサイトについて

今は、写真の伝え方が色々とあります。
特にWEBでは、InstagramやTwitter・TumblrなどのSNS、ブログ形式サービス、500pxやPASHADELIC、自分の個展を開催できる「coten」とわざわざサイトを作らなくても色々なサービスを使い発信できます。
今回のフォトエッセイサイトでは、1つのサイト(世界観)を通してそれぞれのフォトグラファーが独自の視点で作品を発信して行くことがコンセプトとなります。
SNSなどではタイムラインに流れてしまい、なかなか見て頂けない。また紹介した他のサービスも個人としての参加や賞を意識した使い方になってしまうと思い、自分で1つのWEBサイトとして発信していくことにしました。

3.これからのフォトエッセイサイト

現在は、共に立ち上げたフォトグラファーの方と2人ですが、このサイトを通じて色々な出会いがあればと思っています。まだまだ作品は少ないのですが、サイトの方もブラッシュアップをして盛り上げていきます。

よろしくお願いいたします。

フォトグラファーがそれぞれの視点で発信していくフォトエッセイサイト
se.REGARDER

学生向けポートフォリオサイトの作り方

久々の更新、後藤です。
最近とある学生に出会いまして、色々とアドバイスというかお話する機会をいただきました。
その中でポートフォリオサイトを企画して制作へと一連の流れでお話しました。
私もWEB業界に入る前に試行錯誤して作っていたなと思い、改めて今のトレンドも考えながら、 自分の中で作り方をまとめました。
今回の記事では学生のポートフォリオサイトを想定してご紹介します。
何かのヒント・参考になれば幸いです。

制作フロー

1.企画

学生の就職活動用ポートフォリオサイトであれば、ターゲットが企業担当者で、ゴール=CVがポートフォリオサイトを見て面接・採用を決めてもらえる事なので、自分を客観的にきちんと見て、まずはアピールしたいポイントを整理します。

2.ワイヤーフレーム

企画である程度打ち出す事(コンテンツ)が決まればワイヤーフレームでさらに整理していきます。「Cacoo」や「moqups」などのツールもありますが、私は勉強のために案件のワイヤーフレームは「Adobe XD」を使用しています。

Adobe XD

3.デザイン

ワイヤーフレームを元にデザインしていきます。デザインで使用出来るツールも増えていますが、Adobe系「Photoshop」「Illustrator」をおすすめします。
また、スマホは今の時代は必須となってきているので、レスポンシブサイトを想定で制作します。

Adobe Creative Cloud

4.コーディング

エディタはなんでも良いですが、色々使ってみて自分に合うエディタを見つければ良いかと思います。 CMSは実績紹介がいくつもあったり、必要であれば導入を検討してみてください。

メインイメージ

メインイメージは、自分のカラーを出して個性をアピールするエリアになります。
グラフィックが強ければグラフィック。イラストが得意ならばイラストを。趣味で写真を撮ってれば、イメージを引いても良いです。
また、ファーストビューエリアなので、一番に見られるエリアです。文章もシンプルになるべくわかりやすく設置します。

プロフィール・ヒストリー

「名前」「所属」「趣味」などを紹介します。
基本のプロフィールはシンプルに書いて、経歴やこれまでの事はヒストリーでまとめるのが良いと思います。

スキル

デザインツール「Photoshop」「Illustrator」やエディタ「Atom」や「Sublime Text」など使用ツールを紹介したり、HTMLやSass(SCSS)、JavaScript、PHPの技術をグラフやビジュアルで視覚的にアピールするのも良いと思います。

プロセス

就職活動用であれば、このサイトを作るにあたってのコンセプトやこれまでやってきた勉強などを紹介します。 また今後やっていきたい事もこのエリアでアピールします。

作品

学生時代、制作してきた課題サイトなどがあれば載せます。
ただ数が重要ではないので、本当に見せたい作品をサイトを搭載します。

お問い合わせ

PHPなどで技術があれば、フォームを作って設置します。またメールアドレスだけの記載でも問題ないと思います。

まとめ

WEB制作の就職は実務経験がなければ、厳しいですが、私も含めて皆最初は未経験。会社に入り色々と経験していきます。
その第一歩の業界に入るには、ポートフォリオサイトは重要です。
技術や経験ももちろん見られますが、サイトを通して人間性も見られるので、伝え方など気をつけて制作してみてください。

売り上げを伸ばそう!楽天商品ページの作り方

後藤です。
このブログから最近楽天などECに関するお問い合わせを頂いていますので、一例ではありますが、楽天・YAHOOショップの商品ページ(ランディングページ)の作り方をご紹介します。

商品ページについて

単品通販でよく見る「ランディングページ」というものがあります。
画像が縦にバンバン設置してある長いページです。
ランディングページは、楽天などのモールでいうと、商品ページになります。
楽天だと「httpss://item.rakuten.co.jp/ショップ名/商品管理番号(商品URL)」の各商品ページです。

コンテンツについて

各コンテンツは色々詰め込み、長ければ良いという訳ではなく、商材によっても伝え方は違いますし、運営の中で数字を見て入れ替えたり、ブラッシュアップしたりと何度も試行錯誤が必要な重要なページとなります。
※今回ご紹介するのは新規で商品ページを作る際の一例です。

1.メインイメージ

要素例:キャッチコピー・商品名・押したい要素などのアイコン・写真
※メインイメージは最初にユーザーが見るファースト画像です。この画像だけでどういう商品なのかわかるように、情報設計します。

2.CV(コンバージョンエリア)

商品数が多いショップや商材の種類が多いショップでよくあるのですが、何をメインにしているショップなのかがわからないことがあります。
その場合はカテゴリをうまく分けて見せたり、ショップコンセプトコンテンツを設置したりとユーザーにとって分かりやすいサイトにしていることが重要です。

3.結果

商品メリットやデメリットの解消方法などを紹介します。ここで商品の必要性を提案します。

4.ポイントをピックアップ

商品内容を簡素化してわかりやすくカテゴリ分けして、説明します。
※商材によっては競合他社が多い中ことがあるので、他社にない売りや、こだわりなどを紹介します。

5.信頼

ランキング・受賞歴・メディア搭載情報などを紹介します。

6.安心

お客様の声などのレビューなどを紹介します。

7.サブコンテンツ

以下は商材に合わせたコンテンツを紹介していきます。

  • 色や柄のバリエーション
  • ブランド紹介
  • 飲み方、レシピ
  • 使い方

8.商品概要

「名称」「重量」「賞味期限」「原材料」「産地」「販売者」「製造者」

まとめ

あくまで一例となりますが、上記でお客様へ伝える必要なコンテンツを整理することができます。
書籍などでも例えられますが、メインイメージから最終的な成果の購入まで、営業マンのように問題を明確にして、解決方法を提示してセールスすることが重要です。

楽天ショップ制作でやってはいけない5つのこと

後藤です。
現在楽天ショップのリニューアル案件を請け負っております。
オープン時は最初のアプローチで軌道を確保し、リニューアル時にはすでに売り上げがあり、さらなる成果へ繋げなければなりません。
そんな楽天ショップでのオープンやリニューアルする時に、やってはいけない5つのことをまとめました。

1.デザイン主体で制作する

かっこいい、おしゃれなデザインは良いのですが、そもそも使い易い設計になっているか?を考え、デザイン制作に入る前に導線をしっかりと考え、カテゴリ分けを行い設計します。

2.トップページのバナーが盛りだくさん

トップページに設置してあるバナーだけで、50個以上のバナーが並んでいるショップを見る事があります。
多ければ良いということではありませんが、、、私が設計するときにはバナーに優先順位をつけて、大きさやデザインでメリハリをつけています。

3.スマートフォンが簡素

楽天のスマートフォン制作は、トップページをGOLDで制作して、その他特集ページなどをGOLDで作るのみで、商品ページは楽天のテンプレートになります。PCサイトはしっかりと力を入れてるのに、スマートフォンは簡素にバナーが設置されているだけのサイトが目につきました。
ショップや商材にもよりますが、スマートフォンの売り上げが年々上がってきていると思うので、トップページなどのデザイン・設計により力を入れた方が良いと思います。

4.売りたい商品がわからない

商品数が多いショップや商材の種類が多いショップでよくあるのですが、何をメインにしているショップなのかがわからないことがあります。
その場合はカテゴリをうまく分けて見せたり、ショップコンセプトコンテンツを設置したりとユーザーにとって分かりやすいサイトにしていることが重要です。

5.決済や送料情報がわかりにくい

ユーザーとのトラブルやクレームにつながりやすい、送料や決済情報がわかりにくいショップが多いです。 送料や決済情報はショップによって違うので一番ユーザーが気にするところです。
お問い合わせはメール・フォームや電話番号をきちんとわかりやすく設置しましょう。

まとめ

楽天だけではなく、その他ECサイトでも日々の運用を考えていかなければなりません。
管理画面RMS内のデータ分析で色々と細かいデータも見れますので、PDCAサイクルを常に回して、効果的に施策していくこと大事です。

Copyright © INQUIRY BLOG AllRights Reserved.