カテゴリー別アーカイブ: webデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe Creative Cloudを導入しました。PhotoshopCCとIllustratorCCについになった!

こんにちは。nekonomoridesignのYoshyです。
パソコンを元の状態に戻しつつ、仕事が再開できる状況にしようと、色々考えてきました。今まで、自分のPCにソフトが無いと不安になる人でしたし、正直、「クラウド」ってなんぞ?と思って敬遠していました。

クラウドは実はとても便利だった!インストールソフトがなくてもソフトのインストールができる、まるでスマホのアプリみたいなものだった

クラウドっというのはその名のとおり「雲」のように、自分の手元じゃないところを基準として、そのサービスを利用するみたいな感じです。ですので、インストールソフトもありません。全てダウンロードで済みます。

Adobe Creative CloudのPhotoshopやIllustratorならアカウントさえ覚えていれば、新しいパソコンになっても手間が少なく済む

今まで、そういうサービスに何となく信用も無かったりしたのですが、スマホが一般的になり、アプリやら使う事に慣れてくると、クラウドサービスの便利さにだんだん気づいたので、今回思い切ってクラウド型にメインシフトしていこうと思いました。
PhotoshopやIllustratorは元々容量も大きいですし、バージョンもしょっちゅう新しくなるものです。(新しくなっても使う機能はあまり変わってない、イラストレーターの場合だと印刷や取引先にデータを出すときにバージョンが新しすぎると開けないといわれる・・・とかもあったりはするのですが)デザインを生業にしようとしているのだから、もういっそ、新しいのに順次対応していけるようにならねば、という思いもあり、Creative Cloudのフォトショップ、イラストレータを導入することにしました。

Adobe Creative Cloudでイラストレーターやフォトショップを操作するのに必要なパソコンのスペックは?

実際にインストールしてみたのですが、両方、コンパネでみてみたら、1GBぐらいしか容量とってませんでした。
まあこれが大きいと感じるかどうか・・ですが、いまどきのHDDやSSDは容量もめちゃめちゃありますしね・・・ヽ(;・ー・)ノ
ソフトの容量的には問題ないのですが、もしかしたら、このソフトを動かす場合、メモリが大事になるかもしれません。
Windows7使用の私ですが、メモリがが4GBで、たまに遅さを感じます。エフェクトとかめっちゃつかったりすると、重く感じるかもしれません。
さらに、最新版が常にアップデートされるので、そのたびにメモリをくうような事が発生するかもしれません。

しかしながら、最新版が常にバージョンアップされる事も良いですし、クラウドストレージが与えられるので、データの保存をクラウド上に出来ます。これにより、自宅以外でもデータをいつでも参照できたり、携帯アプリと連携して、携帯でいじったりもできるようになり、とても便利になりそうなので、メモリを増設も今後検討していきたいと思っています。

まってました!待望のIllustratorの自動復元&自動保存機能!!

そして何より、メモリが不足していると陥りやすかったIllustratorの不具合!新しい機能?として、よくイラストレーターで発生してた「予期せぬエラー」的なことで保存されなかったり、レイヤーの選択をしている最中に何かバグが発生して緊急停止してしまい、

あああ・・・!保存してない・・・作ったデータ消えた・・・・
私の●時間返して・・・・

という悲しい事態が起きても、自動保存してくれている機能が付いたこと・・・ですかね。

実際、すでにもうその便利機能にお世話になることになりました(笑)

気持ちよく作業してたのですが、何かメモリを食っちゃったらしくメモリ不足によるエラーっぽいので落ちたのですが、「復元」というファイル名で、最新状態が保存されていました。

エクセルにはすでに自動修復・復元・保存機能があった

コレは本当に便利です。エクセルなどには結構前から付いていましたが、これ以外と大事なんですよね。やった作業量考えたら、エラーで消えたのに・・とやるせない気持ちなっていたのがなくなるわけですので、いい機能が付いたと思います。

話は戻って、photoshopやillustratorがクラウド化したら、フォントやブラシなどの追加はどうなるの?

フォントとかは、コレまでどおり、もっているフォントがあれば、Windowsのシステムにいれて使うだけなので問題ありません。

強いていうなれば、さらにこのクラウドからは、Adobe経由で、フォントのインストールも出来ます。結構いろんな種類のフォントが無料でダウンロードできます。
ブラシに関しては、今までどおりオリジナルブラシを使う事もできます。
オリジナルブラシもたぶん、クラウドの中に入れておけば、ずっと使えるのかも?しれません。

これからの私の新たな相棒PhotoshopCCとIllustratorCC

7月末までキャンペーンで、photoshopが月々980円、illustratorが1,980円で使えます。
かなり安いので、今のうちにGETがオススメ

Google Adsenseの二次審査に落ちました・・。理由はコンテンツ不足?

こんにちは。nekonomoridesignのyoshyです。
今日はちょっと悲しい出来事がおきました。
このブログを書き始めて約1ヶ月が経過したので、そろそろ色んなところに露出したり、コンテンツの充実と魅力的なページにもするために、Google Adsenseさんにも申し込みをしておこうと思い、申し込みをさせて頂きました。

一次審査は通っていたようだったのですが、本日こんな通知が・・・。

Google Adsenseさんから、不十分なコンテンツ とのことて承認不可の通知

不十分?!1ヶ月毎日更新していたのに・・と嘆いてしまいましたが、同じ原因で審査オチしているひとが居ないかをググってみたら、いらっしゃいました!
ので、その方の記事を漁るように読ませていただいていたのですが、考えられた原因は以下のような感じで、さらに、この二次審査は、人が見ているということらしく、審査は相当厳しいもののようです。記事を毎日コツコツ書いていたので大丈夫だろうと思っていたのですが、落ちたのは事実。直さないといけないので、色んな得た知識から、自分のブログに当てはまりそうな事をピックアップしてみました。

Google Adsenseの審査に落ちる理由を考えた

  • 1記事あたりの文字数不足
  • 何かGoogle Adsenseさんの規約に引っかかることがあるのではないか
  • もしかして検索クローラーに乗れていない設定になっている?
  • ちょうど申請した日のブログの掲載記事に、タグのバグがあって、サイドバーとかのナビゲーションが一切非表示になっていたのが原因か
  • Adsenseにしやすい内容の記事が少ない?

・・・ぐらいしか思い当たりませんでした(泣)アダルトサイトでもないし、何も配布していないし・・でも、何とか審査が通るように修正していくしかありません。まだ1ヶ月しか更新していないのだから。今から大幅修正となってもそれほど痛くは・・・ない・・はず。
さ。気を取り直して検証していきます。

検証1.1記事あたりの文字数を確認してみた

コレをやってみたのですが、短いなーとおもうような記事のときでも500文字を越えていました。
GoogleAdsenseさんは、画像だけのページ等はダメだそうなのですが、バッチリ文字打ってました。

検証2.規約に引っかかる事をしていないか?

1度だけ、本を紹介した記事を書いた時に、Amazonさんへのリンクを貼ってしまっていました。
もしかしたら、ダメなのかもしれないと思い、コレは修正。
リンクをはずしました。

検証3.検索クローラーに乗せない設定になっていないか?

ブログを立ち上げた時、まだテスト段階だった時、検索に乗せないようにする設定をwordpressの管理画面でしていた気がしました。
設定→検索から一応、検索クローラーにのせないという設定になっていないかチェックしましたが、ちゃんとチェックははずしていました。

検証4.タグによる記事のバグ・・・

これはミスりました。確かに記事をアップした時に、サイドバーとかヘッダとか全然無いなと思っていたのですが、ラグだろうと思って放置をしておりました。

もしかしたら、チェックしてくださった方がこの最新の記事のページをチェックなさっていたのだとしたら・・運が無かったとしか思えません。今は修正して、ナビゲーションもちゃんと表示されています。
タグをコードタグでくぐって表示するのを失念していて、直でかいたスタイルタグやテーブルなどを思わせるHTMLタグを、誤って認識したようで、サイドバーやナビゲーションが一切消えていました・・。

このコードバグを見つけた時はびっくりしましたが、最近お仕事でHTMLタグを修正したりミスしているところを見つけて直すのばっかりやっていたので「直す力」が付いてきたのかもしれません(成長成長・・)

検証5.掲載しにくいような記事が多い?

もしかしたら、ですが、Adsenseにしにくいような記事が多かったのかなー・・・なんて思っちゃったりしています。

自分の備忘録的に記録しているのもあるので、どうするんだコレ、という感じだったのかなと思ったりも。でも、自分の書きたいことをこれからも書いて、読んで頂いた方に少しでもお役に立てたらうれしいと思っているので、これはどうして行こうか悩みの種になりそうです。
これからは少しだけキーワードを意識して記事を書こうかなと思ったりしています。

と、思い当たる節は全部直したので、再度今日申請をしてみました。

記事を読んでいると、一発で受かる方は少ない?そうで、何かしらのミスで承認されない事があるようです・・。
それだけ、GoogleAdsenseさんはきっちりなさっているという事ですね。

何とか、私のサイトにも掲載させて頂けるとうれしいのですが、コレばかりは審査なのでどうにも祈るしかありません。

これからも毎日コツコツ書いていきます!

くじけないぞー!

EC CUBE 2.13.3 カスタマイズ 商品詳細コメント欄のhtmlにcssを適用させる方法 tableタグが使えない時の対処法

こんにちは。nekonomoridesignのYoshyです。
本日も、EC CUBEカスタマイズについてお話したいと思います。

商品登録をしていて、詳細ページのコメント欄にhtmlが使える事が判明したので、HTMLで記載し、CSSのスタイル設定で装飾してみる事にしました。

EC CUBE 2.13.3で商品詳細ページのhtmlが使えるコメント欄でcssを使ってデザインする方法

ひとまず、
EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品の編集画面を開き、詳細-メインコメント(タグ許可)のところにhtmlを記載します。

ここに、最初、styleとかでくくってやってみたのですが、案の定ダメでした。

では、CSSはどこに記載するのか。

/html/user_data/packages/custom/css/contents.css

この contents.cssに自作のCSSを追加。

そして、

EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品を再び選んで「編集」を押し、詳細-メインコメント(タグ許可)のところにhtmlを記載するだけです。
ちなみに、使えるhtmlは限られているようで、tableは使えませんでした。

tableっぽいので商品詳細情報を組みたいなら、cssでスタイル設定したdivを並べるしかない

のタグは使えたので、テーブルっぽいのも、すべてdivで作るのが良いみたいなので、float:leftを設定したclassを指定した

でうまく組み合わせていくしかなさそうです。
ちなみにここは 99999文字が上限なので、気を付けてくださいね。参考になるとうれしいです。EC CUBEの超初期カスタマイズであれば、質問にお答えできますので、お問い合わせもお気軽にお待ちしております。

EC CUBE 2.13.3カスタマイズ 商品検索で商品番号 product_codeを検索対象にする方法

こんにちは。nekonomoridesignのyoshyです。相変わらず、EC CUBEと闘っています。

慣れない言語と新しいバージョンで全然情報無くて、毎日試行錯誤しております。

カスタマイズも終盤に差し掛かり、枠組みらしきデザインも出来てきたのですが、(と言っても、既存のデフォルトテーマに毛が生えたくらいの些細なカスタマイズですが)デフォルトにあった商品検索が、なんかカテゴリーをプルダウンで選んだりするのが嫌だったので、プルダウン検索になっている部分を削除して、商品検索だけにしました。

その状態で、デバッグしようと思って、検索が動くかやってみたのですが……

EC CUBEエラー 再び。(もう何度目?)
EC CUBEの商品検索はデフォルトでは商品名でしか検索出来ない

……。

一般的な方々がどういう検索をするのかわからないですが、少なくとも自分は、型番商品なら、商品番号で検索すると思うのです。

特に、今回私が携わっている商材は、型番商品で、競合他社も比較的少ない商材なので、価格で見比べてもらうためにも商品番号検索は必至でした。

ですので、またまたカスタマイズしました……。

今回は検索結果にまつわるところなので、下手したらいっぱい弄らないとダメかと思ってたのですが、案外、1箇所1ファイルだけで大丈夫でした……w

———————————————————————————–
カスタマイズ箇所
/data/class/pages/products/LC_Page_Products_list.php
———————————————————————————–

【変更前】394行目~400行目
foreach ($names as $val) {
if (strlen($val) > 0) {
$searchCondition[‘where’] .= ‘ AND ( alldtl.name ILIKE ? OR alldtl.comment3 ILIKE ?) ‘;
$searchCondition[‘arrval’][] = “%$val%”;
$searchCondition[‘arrval’][] = “%$val%”;
}
}

———————————————————————————–
———————————————————————————–
【変更後】394行目~401行目
foreach ($names as $val) {
if (strlen($val) > 0) {
$searchCondition[‘where’] .= ‘ AND ( alldtl.name ILIKE ? OR alldtl.comment3 ILIKE ? OR product_id IN (SELECT product_id FROM dtb_products_class WHERE product_code ILIKE ? AND del_flg = 0) ) ‘;
$searchCondition[‘arrval’][] = “%$val%”;
$searchCondition[‘arrval’][] = “%$val%”;
$searchCondition[‘arrval’][] = “%$val%”;
}
}
——————————————————————————

こうするだけで、商品番号で検索できるようになりました!

いやー……意外。

あ。ちなみに、このカスタマイズであれば、デフォルトのプルダウンの検索残ってても大丈夫なので、デフォルトテーマの方でも、カスタマイズした方でも使えます。

もし。お困りの方が居たら、参考にしてみてくださいね。

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

EC CUBE備忘録 yoshy

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

こんにちは。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デザイナー!