タグ別アーカイブ: ウェブデザイン

ネットショップ用の注意喚起バナー作製の基本

こんにちは。nekonomoridesignのyoshyです。
ネットショップ用にバナーの作製などを日常的にやっている私なのですが、もうかれこれ5年以上そういう仕事をしていると、ちょっとお客様に注意喚起したい事があれば、フォトショップなどですぐにバナーを作ってその日のうちに貼り付けて・・・というのをやっているのですが、その画像はいたってシンプルに仕上げるようにしています。

残りわずか!などの短期間にしか出さないバナーに時間はかけない。
目立つ文字・配色・バランスでさっと手早く作る。

たとえば、今日、在庫が残り少ないと連絡があった商品のページには、「残りわずかです!」とお客様に注意を促すバナーを目立つように配置しました。
文字だけではやはり「視認性」(目に付く)のが少なく、見た人の印象に残らないので、

  • 印象に残りやすい配色(おおむね3色以内)
  • 印象に残る色
  • 印象に残るカラーバランス
  • 文字配置

を意識してつくりました。

※作ったバナーがこちら↓

目立つバナー
目立つバナー

赤を基準に白と黄色と黒で色数少なく、印象に残って欲しい文字を特に強調した文字デザインにした、極めてシンプルで極めて簡単なバナーを10分ほどで仕上げて即アップしました。

パソコン用だけではなく、スマートフォン用にもきちんと配置しよう

今回、私の管理しているのがヤフーショッピングだけだったのですが、ヤフーショッピングの該当の商品ページには、スマホ用の編集ページがあるので、スマホ用の編集にも、もちろんこのバナーを付けました。

いまや、スマートフォン用のページの編集もきちんとする時代

スマホ用のアプリが出ているほど、ネットショッピングはパソコンとスマートフォンで利用している人は増えています。
ですので、こういった注意喚起のバナーなども、スマホ用にもきちんと設定するのが望ましいと思います。

たかがバナー、されどバナー。

バナー1つで、お客様に伝わるメッセージは大きく変わります。
それぞれ、そのバナーの持つ役割に応じたものをすぐに用意できるかが、時間の流れの速いネットショップで成功していく鍵だと思います。

それでは、今日はこのあたりで!

Filemakerを使って楽天市場やヤフーショッピングやAmazon用のCSVデータを一括で作成するソフトを開発したい

こんにちは。nekonomoridesignのyoshyです。
先日のファイルメーカーワークショップに行ってから、色々考える事がふえてワクワクしています。

元から、FilemakerはCSVデータを扱うときはほぼメインで使っていたソフトウェアなのですが、いつも中途半端にその場しのぎ用でプログラムを自作して、入力をやりやすくしたりとかそういう程度にしか作っていませんでした。

勉強会に参加して、本格的に、各モール対応の商品ページ作成データベースをファイルメーカーで開発しようと思い始める

前に勤務していた会社ではネットショップをメインとした仕事をさせていただいていて、主に商品ページの作成を中心に店舗運営全般を全面的に何でもやっている、と言う感じでした。

商品ページを作るのは、デザイン系の仕事なので、PhotoshopやIllustratorを使用してお客様に見ていただきやすいページ作りをしながら、出来た画像を元に、各モールへは手作業で商品ページをアップロードしていました。

CSVデータで一括で上げていたのはAmazon店だけだった

楽天もヤフーも、CSVで一括でデータのアップロードは可能なのですが、それぞれにCSVアップロードの形式も違えば、ルールも違います。アップロードするファイルも違うので、何かの手違いでミスして、全商品ページをロストしてしまうのが怖くて、出来ませんでした。

Amazonは、その点、商品ページのCSVデータアップも比較的】判り易いルールだったのと、自分のところに商品の元データをもっておかないとAmazon側からデータをダウンロード出来る機能はないので(2015年夏現在)自分のところに商品マスターが絶対に必要な以上、最初からCSVで商品データベースを作っておくほうが良いと思いAmazonだけは最初からファイルメーカーベースで商品ページ用データーベースを作っていました。

在職中の夢。共通の商品マスターを元に、各店舗のCSVデータを作れるようにしたかった

Amazon用のシステムは構築したのですが、日々の業務が忙しすぎたのと、開発に使える時間が勤務中はほとんどなく、Amazon用のシステムも、同僚と自分が仕事を早く終わらせるために自宅で開発したものでした。

冒頭に申し上げたようにそのシステムを作るときに楽天用とYahoo用のシステムも作りたいという野望はあったのですがあいにくかないませんでしたが、今になって、もうその会社には所属していないので自分がそういう仕事をする事はなくなってしまっていますが、実際にこういうシステムがあったら良いなと思いながら過ごしているネットショップ勤務の人がいるのではないかという思いが消えませんでした。

ファイルメーカーベースの受注ソフトはがんばれ店長が得意なら、私は商品ページ作成に特化したFilemakerベースのデータベースを作ってみようと思う

ネットショップ運営をしている方にとって、時間を割くべきは、商品の選定・戦略・商品の調査、売るためのページ作り、SEO対策・集客などであって、アップロードする時間は短時間のほうが良いに決まっています。

売るためのページの画像などのデータが出来た後、スッとアップロードできれば、それに越した事はないはずです。

Filemakerがすきでページ作りも好きな私にしか出来ないかもしれない

CSSなどの知識も有し、HTMLの知識もあるので、そういうのを活かしながら徐々に開発していって、テンプレート的なものを開発していこうと思っています。

まだどういったもので具体的に・・・というのがないのですが、もし誰か困っている方がいらっしゃいましたら、一度ご相談に載らせてください。
データベース開発にお力を貸していただける方も同時にいらっしゃましたらお声かけをいただけるとうれしいです。

近いうちにネットショップを自分でもオープンしてみようと画策中。

開発をするにあたり、やはり現場を知るのは大事だと思っています。
まだ個人事業主開業届けも出していないので法人契約がまだ出来ませんが、そう遠くないうちに出店して実際に自分でもネットショップ運営をもう一度したいと思っています。

忙しくなりそうですが、ファイルメーカーベースで何かネットショップ運営をされている方のお役に立てられればうれしいと思っています。

またこのFilemakerのソフト開発については進捗が在り次第お届けしたいと思います。

それでは、今日はこのあたりで。

photoshop Tips セールのバナーに良く使われる星みたいなギザギザのセールシールみたいな感じをフォトショップで書く方法 簡単作成方法

こんにちは。nekonomoridesignのYoshyです。今日は、photoshopの技術アップ講座?をしたいと思います。

セールの時期になりましたね。この時期になると、ウェブ製作現場やネットショップのウェブデザイナー、Webページ作成の人が良く頼まれる仕事のひとつに、「バナー作成」があります。

よくある、「セール用バナー作って」というアレです。
あまりに良く出くわす場面なので、ちょっと簡単に作る方法を伝授したいと思います。
※photoshopでバナー制作をしている人向けです。

フォトショップで簡単にセールバナー(セールっぽいアイコン)を作る方法
全photoshopバージョン対応です。

まず、フォトショップを立ち上げて、新規作成をします。
大きさはどんなサイズでもかまいません。今回は作り方だけの伝授です。

立ち上げたら、左のツールバーから、カスタムシェイプを選択

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

カスタムシェイプに、新しいシェイプを追加します。
まずは、現在のシェイプの横にある三角形を長押ししてください

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

長押しすると、追加するシェイプリストのグループが出てきます

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法


バナーと賞

という種類を選んでください。選ぶと、何か聞いてきます。
今のシェイプ一覧に追加の場合は「追加」置き換える場合は「置き換え」をしてください。
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

上の写真の場合は、【追加】をしました。
追加した中に、なんかギザギザっぽい丸があると思うのでそれを選択。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

ツールバーが、カスタムシェイプツールがアクティブ(選択された状態)になっているのを確認します。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

カスタムシェイプツールの色などをここで設定します。
旧バージョン(CS以下)の場合、もしかしたらこういうのないかも知れませんが、なければ、描画色の色を変えてください。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

書きたい色が決まったら、一度書いてみましょう。
一瞬で、ギザギザのやつができましたね。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

ギザギザはかけたので、その上に、文字を打っていきます。
セールっぽさを出すために、あえて赤色にしました。
オブジェクトの上で

SALE

とうちます。

フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法
フォトショップで星みたいなギザギザのシールっぽいオブジェクトを簡単に作る方法

すると、こんな感じで完成しました。

いかがでしたでしょうか?意外と簡単なものなのです。

カスタムシェイプは優秀なツール。便利に使って時短作成デザイナーになろう。

デザイナー=手作りでないといけない、という考えをお持ちの方もいらっしゃるかと思います。確かにそうなのですが、クリエイティブに時間を全部使える、ゆっくりデザインが出来るというデザイナーも案外少ないと思います。

特にウェブデザイナーの場合、バナーなど簡単なものを作成する場合は、スピードも要求される場面が多くあります。

そんな時、こういった便利ツールをうまく使って、クリエイティブの作業を効率よく、かつ、クリエイティビティに行うこともデザイナーの腕だと思います。

カスタムシェイプは追加も可能。ネットで探せばいい物が結構出てくることも。

photoshop カスタムシェイプ

でネットで一度検索してみてください。
案外、いろいろ出てきます。矢印や足跡、マーク、シンボルなど・・・
探せば山ほど出てきます。

カスタムシェイプは自作も可能。Illustratorなどが得意な人はオリジナルのカスタムシェイプも自作できちゃいます

案外使い勝手の良いカスタムシェイプ。
仕事などで良く使うアイコンぽいような形の物があるのであれば、ベクターデータ(illustratorのようなので書かれたやつ)を毎回コピーして引っ張ってくるとかであれば、いっそのこと、カスタムシェイプとして登録してしまったほうが早いと思います。

時短でデキるデザイナーになりましょう♪

それでは今日はこのあたりで!

Google AdSenseさんの二次審査に合格しました!

こんにちは。nekonomoridesginのYoshyです。先日、Google AdSenseさんの審査に落ち、その後、サイトの改修を行った結果・・・

Google AdSense 二次審査通過!!!
無事、承認してくださいました!ありがとうございます!!

前回の承認落ちした時はAdsenseさんの二次審査に落ちた・・・に記載していますが、コンテンツ不足による審査落ちでした。修正したポイントも前回のブログに書いているのとおりのままで、しいて変えたところといえば、アレ以降、各記事に、キーワードを意識するようにしました。

コンピュータが巡回してプログラムを読み取っているのがwebページです。という事は、「プログラムにとって聞き取り(読み取り)」やすい文章構成、要素である事が大事なのかなと思い、記事の内容に自分なりにテーマとキーワードを意識して文章を書くようにしました。
後は、前回の記事に記載したとおり、amazonさんへのリンクを消したり、ナビゲーションが正しく表示されていなかったページのバグ修正をしたりしました。

記事は、600文字以上を意識するようにして、あまり短い文章になり過ぎないように、それでいて、さっきも言ったように伝えたい言葉や書いている内容に順ずるキーワードが乱立しないように心がける事が、審査通過には必要なのだと思います。
通過理由は非公開なので、コレをしたら、というのはお伝えできませんが、実感したのは、

いかにページに来てくれた人にとって情報を的確に伝えている意味のあるwebページになっているか

という事なのではないかなと思いました。

ネットショップ等でも、最近は検索結果に
「いかに訪れた人に有益(見る価値のある)な情報を提供しているサイトか」というのが基準になっているよう
ですし、商品名がダラダラ長いのは順位が下がるというようにもなってきています。今後おそらく、画像だけで構成するようなページよりも、プログラムが読んでも人が見ても何が書いているかわかりやすいページを評価する傾向になると思います。

乱立するようになってきたからこそ、正確さが求められるようになってきたという事でしょうか?SEO対策も、今後そのような事を意識していかないといけないのかもしれません。

ネットショップで、よく画像だけのページになっている店舗さんも良く見ますが、きちんとHTMLを組んで、「魅せる」ページへの取り組みをしていかないと検索の評価が下がる一方になってくる予感がします。webページの作り方も今後変わっていくと、画像だけを作っていればどうにかなった時代から、初期の時代に回帰して、きちんとhtmlを組める人に仕事を回して、webページの価値を高めていく事が必要になってきそうですね。

ネット業界は日進月歩。
私もこれからも研究しながら頑張ろうと思います。

Google Adsenseさん、承認本当にありがとうございました!!

関連記事

餅は餅屋、WebはWeb屋、デザインはデザイン屋。ワークシェアリングで専門分野の分業が未来の形?

こんにちは。nekonomoridesignのYoshyです。
先日、仕事である資料を探していて、ふと気づいたことがありました。仕事で、写真を背景に使うという事で、フリーで配布してくれているサイトから拾って、商用利用OKなの探して使ってくださいと言われ、フリーで配布してくれているサイトさんをいっぱい見ていました。

商用利用OKの写真掲載サイトはクオリティも高く良い素材も豊富

商用利用OKのサイトさんを探していて、気づいたのはそのクオリティの高さと量の多さでした。簡単なメールアドレス登録だけで利用させていただけて、しかも解像度も大きいものも用意してくれていて、まさに至れり尽くせりな感じでした。
写真の管理もきちんとされていて、とても見やすく、非常に良い素材を集められました。

写真は意外と本格的に撮ると時間も知識も必要

背景などに使ったりするような大きな解像度の写真や、素材に使う場合であっても、色のバランス、構図によっては、「ああもうちょっとこの角度だったら・・・」というのも多くあります。やはり写真はその質が全て。
いい角度であっても色バランスが微妙だったりすると使いづらかったりというのもあります。

自分で納得したものを撮ろうとしても中々その場所や撮り方に悩んでしまうものです。自分で勉強して好きな写真を撮るのももちろん大切な事ですし、それが出来れば何より良いのですが、そこまでの域に達するまでに時間がかかります。

無知は良くないが、全部を自分でやるよりも、餅は餅屋、写真は写真屋、WebはWeb屋、デザインはデザイン屋へ。

デザインやクリエイティブな事をする人の中には、その作業の全てを自分でする方も居ると思います。そのほうが一貫性もあり、クオリティもよりこだわった良いものが出来る事もあると思います。

しかしながら、最近思うのは、「得意な分野」がある人に「得意な分野」をお任せして、「分業」にすることこそ、効率も高まり、よりクオリティの高いものが仕上がる事もあるのではないかと考えるようになっています。

以前勤めていた会社で、「誰が休んでもいいように」という大義名分の元、仕事のローテーションをする事が多くありました。
その考えそのもの(誰が休んでも仕事が回るように)というのは賛成だったのですが、仕事をローテーションすることに、どうしても意義を見出せませんでした。ローテーション制にすることで、実質的には質が落ちますし、やる人によって質が代わったりする事もありました。
慣れ、不慣れの問題もあります。そして、ローテーション出来る仕事=責任感というのが意識的に低下しているようにも見られました。

そういった、【責任感】や【プロ意識】を保つためにも、やはり専門性を重視したスタイルで仕事をするほうがより良い結果が生まれると考えるようになってきています。

ワークシェアリングはこれからのビジネススタイルの定番になっていく

私はデザインが得意で、FilemakerやPhotoshop、Illustratorを使った仕事が得意ですが、自分でWebデザインも出来るようにないたいと知識を新たな仕事でWebデザイン・webプログラミングを勉強しています。
ある意味、今述べてきた「専門性」という意味では矛盾した事をしてきたと思います。

だからこそ、今思うのです。

「無知」は、仕事を頼んだりする上でも、相手の思う壺のままになってしまうのを防ぐ目的のためにもよくないなので、やりたいと思っていることに対するある程度の知識をつけるのは良いと思うのです。

しかしながら、全部が全部全力で自分でやるのは難しいのが真実です。

ですので、餅は餅屋。WebはWeb屋、デザインはデザイン屋に頼んで、本来自分が目指しているゴールへの最短距離を進むのが良いと思います。

物を売りたい人が、インターネットでの物の売り方はわからないけどネットショップで売ってみたいと思うなら、ネットショップ経験者に聞くのが早いです。ページの作り方がわからないなら、インターネットでの物販のECサイトやウェブページを作ったことがある人に聞くのが良いです。

全部を自分でやりすぎるよりも、どこを誰に頼むか考えて、その人に頼んだ方が、本来やりたい事を優先的にやる時間を確保出来ると思います。

仕事のスタイルが今後そういう風にシフトチェンジして、色んな様々な才能を持った人が、「個」として活躍していけるようになったらいいなと思います。

レスポンシブウェブデザインの作り方 

こんにちは。nekonomoridesignのyoshyです。
最近、お仕事ではもっぱら、レスポンシブウェブデザインの為に、EC CUBEのデフォルトテンプレートをいじり、レスポンシブウェブデザインになるようにCSSと睨めっこして、慣れない作業に毎日うなっています。

そもそも、レスポンシブウェブデザインとは

簡単に言えば、見る端末によって最適な見た目でウェブページをデザインすることで、CSSをつかって、各端末に合わせたデザインで見せ方を変えるというものです。ちなみに、このブログも、レスポンシブウェブデザインになっています。レスポンシブウェブデザイン対応のテーマを使っています。Twenty fourteenというテーマを使っています。

レスポンシブウェブデザイン対応のwebサイトは検索結果の表示にも影響があるといううわさ

 

最近、Googleさんの検索ランキングの評価対象に、レスポンシブ対応のwebページかどうか、というのが要素として加わったそうです。おそらく、タブレット、スマートフォン等の端末も増えた影響でしょう。中途半端な大きさのタブレット端末だと、たしかにPC用サイトを表示すると、編に横スクロールしないといけないなどで見づらいところもありました。
ユーザビリティ性を重視した検索結果を求めるgoogleさんですので、納得ですが、こういった時代の流れに対応をしないといけないので、やはりweb業界はいかにスピードを早く対応していかないといけないのかがよくわかります。

レスポンシブウェブデザインの作り方

とりあえず、根本的にCSSを理解していないと無理です。(CSSでサイト作成の不慣れだったのですごーく苦労しています)
EC-CUBEとかの場合、SmartyというPHPテンプレート等の構成も調べながらじゃないと思い通りにならないです。

普通のwebサイトを作る際にレスポンシブデザインを気にしてつくる、というのであれば、レイアウト的に苦しくない範囲でデザインしていけば大丈夫かと思います。

で。

HTMLの作り方ですが、基本的に普通に作ります。
レスポンシブウェブデザインは、CSSで「見せ方」だけを変えているので、レイアウトや配置も、「見せ方」で変えています。

たとえば、PC用では見せておきたいDIV要素でも、スマホ用では不要な場合は、そのDIV要素のIDやCLASSを、 display:none にしておくだけなので、HTMLそのものは、1個です。

作るのは、CSSを、各端末用のものをデザインするのです。

一般的?というか、私の場合ですが、以下のようにしています。

スマホ用CSS、PC用CSS、タブレット用CSS

をそれぞれ用意。

それを、HTML上では3つ全部読み込ませる感じです。

CSSの設定の方法

CSSを作る時に少し細工をします。
********横幅640pxまで*************************
@media screen and (max-width: 640px) {

ここの間にCSSをかく

}
*********************************************

というような感じで、各サイズに合わせたものを作ります。

ちなみに、PC用の場合、

********横幅780px以上*************************
@media screen and (min-width: 780px) {

ここの間にCSSをかく

}
*********************************************

という感じにします。

そして、ココ大事。

width とかの設定は、必ず「%」で設定すること!!!

じゃないと、可変(端末の大きさによってサイズが変わること)にならないので。。

可変しなきゃ、レスポンシブの意味が無いです。

という事で・・・。

CSSを使いこなせないと、レスポンシブウェブデザインは出来ない・・・です。

これからも悪戦苦闘しながら頑張ります。

それにしても・・・レスポンシブウェブデザインの作り方がまさかCSSで見せ方を変えていただけとは驚きでした。
新たな発見!

目指せ、出来るwebデザイナー!