石井晃太郎ジャーナルコンテンツへスキップ石井晃太郎ジャーナルWEBデザインとマーケティングをテーマに語るビジネスノウハウブログ﻿メニューとウィジェット仕事のご依頼お問い合わせ著者:石井晃太郎1994年の早生まれ。慶應大学在学中からビジネスを始め、卒業後そのままフリーランスに。マーケティングやコピーライティングの知識を裏付けにしたWEBデザインやホームページ制作が主な仕事。某WEBサービスの運営やコンサルティングみたいなこともしてます。フルートやデッサンをやるぐらいには芸術分野、というかクリエイティブが好き。【カラーミー】特定のカテゴリ一覧をトップページに表示する方法【Ajax】こんにちは、石井です。最近カラーミーショップのデザインをさせて頂くことが多いのですが、「トップページにカテゴリ一覧を表示したい」という声をよく聞きます。残念なことに、カラーミーに備わっている独自タグではカテゴリ一覧を表示することは出来ません!そればかりか一番安いプランだと新着記事一覧すら表示できない始末...。そこで今日は、そんなカラーミーショップ特有の悩みを、魔法の技術「Ajax」で解決していこうと思います。今回紹介するコードをコピペしてちょっと書き換えれば、特定のカテゴリの商品一覧や新着商品一覧を誰でも実装出来るようになるはずです。Ajaxとは?まず「Ajax」を知らない人もいると思うのでちょっとだけ説明。簡単に言えば「JavaScriptを使って非同期通信する技術」のこと。非同期通信は、データの送受信を普通は直列回路的に行うのに対して並列回路的に行っちゃおうぜという技術(※イメージ)で、ブラウザの更新ボタンを押さずにページの表示内容を変えたりできます。Googleマップで使われているぐらいには有名なものです。今回はそれを使って「別のページから情報を取ってくる」ということをしていきます。Ajaxの詳細は今回のテーマから逸れるので、詳しく知りたい方は調べてみてくださーい。ちなみに僕は最初Ajaxを「アジャックス」と呼んでました。本当は「エイジャックス」です。お恥ずかしい...///SEOから見たAjaxあそうそう、余談なんですが、AjaxはSEO的に良くないとネット上で言われたりしています。それはもう昔の話というのが僕の見解です。最近はGooglebot君がかなり賢くなったようで、今回のAjaxのやり方であれば何も問題はないとGoogleの偉い人が言ってました。気になった方は以下の記事を、どうぞ。AjaxページにおけるGoogleインデックスの落とし穴GoogleはAjaxで読み込むコンテンツを解釈してくれるのか?特定のカテゴリ一覧を任意の場所に表示するコードまずはコードの全体を載せます。最初に商品一覧を載せたいページです。class名などは自由に書き換えてください。</div></body>次は抜き出したい情報が表示された商品一覧ページ。こちらもclass名などはご自由に。</div></body>最後に今回の主役であるAjaxの記述。これをカラーミーの共通テンプレートの一番下なり「集客->検索エンジン対策->PCショップ用の設定」の欄なりにコピペしてください。トップページと商品一覧ページで指定したclass名を使いますのでコメントが付いている行の情報は書き換えをお忘れなく。今回は「商品一覧ページに表示された情報を抜き出してトップページに埋め込む」ということをしています。細かく言えば、Ajaxで商品一覧ページを読み込み、読み込んだ情報の中からproduct_numで設定した数まで指定した要素を抜き出し、指定した場所に埋め込む、という感じです。カラーミーの機能ではトップページにカテゴリ一覧等が表示できないのは冒頭で述べた通りですが、商品一覧ページなら任意のカテゴリやグループの一覧を表示したりできますよね。そこでAjaxを使って好きな順番に商品が並んでいる商品一覧ページから情報を抜き出し、それをトップページに埋め込んでしまえば、あたかも最初からカテゴリ一覧があったかのように表示される、というわけです。カラーミーの商品一覧ページはgetメソッドでURLに情報を渡して表示内容を切り替えているのでAjaxでも表示されている情報を切り替えられるんですね~。特定のカテゴリやグループの一覧ではなく新着商品一覧やおすすめ商品一覧を表示したい場合は、商品一覧ページのソート機能を使って新着順なら新着順、おすすめ順ならおすすめ順に商品が表示されている状態のURLを指定してください。今回は以下の記事を参考にさせて頂きました。『花のや』のwadaさん、ありがとうございます!カラーミーショップで任意のカテゴリをTOPに表示する方法あとがきAjaxを使って強引にやらないと需要があるものを表示できないカラーミーは、やっぱり使いづらく感じますね。あと、カートの中身はAjaxでも参照できないっぽいので、カートに入っている商品のオプション情報をトップページに表示したりは出来ないようです。ECサイトを作るならWooCommerceが最強なのか...P.S.今回の機能の導入が上手くできない人はコメント等で連絡ください。3件のコメントWEBデザイナーこそデザイン以前の領域に踏み込むべきこんにちは、石井です。2017に参加してきました!WordPressコミュニティのイベントに参加するのは初めてでしたが、座り続けてお尻が痛くなったことを除けば良かったです。裕さんの『みんなでデザイン、あなたもデザイン』というセッションが印象に残りました。そこで今日はそのセッションの内容の一部を拝借しまして、今のWEBデザイナーに足りないものについてお話していきます。みんなでデザイン、あなたもデザイン一応セッションの内容にも触れておきましょう。簡単に言えば、デザインが点の制作から面の設計に変わってきたという視点からデザイナーの働き方について問題定義する、といった内容でした。関口さんは「デザイン思考のようなデザインを”開く”潮流は、デザイン以前の領域におけるデザイナーとその他の職種(エンジニアなど)との協働を可能にし、高い持続性を生む。今の時代はそういう働き方が理想だよね」的なことを言いたかったのかと思います。社会学的な視点から議論が展開されていて、社会学をかじったことのある身としては面白かったです。2017のサイトで公開されるビデオとスライドをご覧ください。今回テーマにしたいのは「WEBデザイナーの仕事領域」です。鍵となるのはセッション内で引用されていた松倉早星さんというプランナーの方のインタビュー記事。そもそも新しい会社にしなきゃなって思った経緯のひとつに、何かひとつクリエイティブで課題を解決しても、プランナーなのでそこの奥にある課題が見えちゃったりします。本当はそこも手をつけたい!でも、依頼としてはすでに終わっているので「お疲れ様でした!」で終わってたんです......。しても言わずにはいれなくなって、伝え出したのが去年あたりからです。「言われるまで気づきませんでした」としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感じました。一過性のもので人の行動とか価値観、さらには人生観を変えることはできないけれど、丁寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。そこに対して、もうちょっと腰据えて向き合っていきたいなという思いで会社を作りました。関口さんはこれを踏まえて、”デザインがはじまる前の領域”に関わる人もデザインをしていこう、と仰っていました。非デザイナーがデザイナーに、デザイナーが非デザイナーに歩み寄ることで良い働き方ができるかもね、ということでしょう。今のWEBデザイナーに足りないものこの話を聞いた時「そうだそうだ!」と思いました。世間一般ではWEBデザインの業務は「制作するサイトの見た目を装飾すること」とされています。例外はあるとは思いますが、業務の範囲がWEBサイトの目に見える部分に限定されている傾向はあるでしょう。それってどうかと思うんです。そもそも僕は、デザインとは「クライアントの問題を解決するための表現全般」のことだと考えています。目に見えるグラフィックを制作するだけがデザインではありません。当然ですが、そこには問題解決のための仕組みづくりや設計といった目に見えない部分の作業も含まれています。WEBデザイン業界になると、目に見えない部分がないがしろにされる節がある。確かに分業体制を引いてWEBデザイナーに装飾だけをさせるのは効率的かもしれません。設計や仕組みが特に大切とされるWEBサイト制作において、デザイナーが目に見えない部分に関与しないのは致命的です。設計や仕組みを理解して初めて(言い方は悪いですが)お客様をそこに誘導する=ビジネス上の問題を解決するデザインができるはずですから。見た目は綺麗だけどお客様からのお問い合わせが少ないWEBサイトが出来てしまう原因がこれでしょう。WEBサイト制作で最も大切な仕組みや設計を理解していない人が見た目のデザインをするから、お客様からの思ったような反応がとれないのです。ひどい時はデザインとアートを混同し、WEBデザイナーさんの自己表現で終わっていることすらあるでしょう。WEBデザインの仕事領域を広げようそんな残念な現状がWEB制作・WEBデザイン業界にはあると思います。WEBデザイナーがデザイン以前の領域に触れていたら、本来ならもっとお客様に喜んでいただけたかもしれません。非デザイナーとデザイナーが歩み寄るべきだという意見に僕は賛成します。今回はそれをWEBデザイナーが非デザイン領域に踏み込むという視点でお話させて頂いたわけです。本当に、WEBサイトの主たる目的であるビジネスにおける仕組みづくりや設計を知らないWEBデザイナーさんはもったいない。社会全体の損につながっていると思いますし、個人としても損しています。これからの時代は個人で活動していようがいまいが、企業やグループという枠を超えて仕事をすることになったりしますからね。目に見えない部分を扱えるかどうかで、そういったチャンスをものにできるどうか変わってきます。仮に独立することになったら、その違いは雲泥の差となって現れるはずです。この記事を読んだWEBデザイナーさんはぜひ、ビジネス周りの仕組みづくりや設計、マーケティングなどを勉強してみてください。見た目のデザインの枠を超えて目に見えない部分に精通しているWEBデザイナーって貴重ですから。ちなみに個人活動しているのなら、それができないと話になりません。「目に見えない部分、勉強するぞ!」と思ったのなら、ぜひ僕のブログを読んでみてください。お役に立てると思います。コメントを残すconfig.rbに書いておくと役立つもの【SASS・Compass・Windows】こんにちは、石井です。TextでSASS・Compass環境のコンパイルが出来ない場合の対処法を書いたのですが、その中でconfig.rbをいじりました。今回はそのついでにconfig.rbに書いておくと良いかもしれない記述をいくつか紹介します。上記記事で書き加えたものです。SASS・Compass環境でコンパイルしようとするとエラーが発生することがあります。エラーには種類があるようですが、僕の直面したエラーは.sass-cacheフォルダがおかしな場所に作られていたことが原因でした。そこで以下の記述によって.sass-cacheフォルダが作られる場所を指定しています。(今回はconfig.rbと同じディレクトリに.sass-cacheフォルダが作られるようになっています。character」と書かれたエラーが発生することがあります。(コメント内にしか日本語が存在しない場合も発生します)以下の記述をconfig.rbに加えればこのエラーを回避できるのでWindowsユーザーにはお勧めです。'utf-8'ソースマップの作成Chromeのデベロッパーツールを使っていると、選択中のスタイルの場所がSASSファイルではなくコンパイル後のCSSファイルの場所で表示されます。SASS勢としては、一々CSSファイルとSASSファイルを照らし合わせて探すのは面倒くさいので、デベロッパーツールにSASSファイルの場所を表示させたいところです。そこで登場するのが「ソースマップ(.css.map)」。コンパイル前のSASSファイルの場所とコンパイル後のCSSファイルの場所を紐づけた地図のようなものです。このソースマップを対応するCSSファイルと同じディレクトリに置いておけば、ChromeのデベロッパーツールでSASSファイルの場所が表示されるようになります。Compassを使えばソースマップを簡単に作ることができるんです。config.rbに以下を記述しましょう。trueこうするだけで、CSSファイルのコンパイル時に、コンパイル後のCSSファイルのソースマップを自動で作成してくれます。ソースマップはコンパイル後のCSSファイルと同じディレクトリに作成されますが、ソースマップをそのディレクトリから移動させてしまうと参照先がずれたりしてしまうので注意しましょう。コンパイル後のCSSファイルを後から移動させる可能性がある場合は、あらかじめconfig.rbのcss_dirを指定して、ソースマップと共に移動先のフォルダに直接出力されるように設定しておいた方がよいと思います。(WordPressを使うときなど)また、Compassではconfig.rbにenvironmentを指定することで開発版(:developement)と納品版(:production)でコンパイルの内容を振り分けることが出来ますが、例えば納品版でソースマップを出力したくない時は、以下のように記述すれば大丈夫です。maps」にチェックを入れて下さい。3のパッケージこんにちは、石井です。3を使い始めるときに「とりあえずこれは入れとけ」と言えるパッケージをご紹介します。「最初から大量に入れすぎると各パッケージの役割がわからなくなる」という考えから、様々なサイトを巡って僕が吟味したものたちです。Textに恋できます。Controlパッケージの管理とかがすごく楽になる必需品。入れとけコンテストがあったら間違いなく1位。TextからショートカットキーでSASSをコンパイルすることができるようになります。Textでは日本語入力時に入力欄が別ウィンドウで表示されてしまいますが、それを通常のインライン表示に変えてくれます。Codecs33この2つのパッケージをインストールすることでShift_JIS(シフトジス、コンピューター上で日本語を含む文字列を表現するときに使われる文字コード)で書かれたファイルの文字化けを防いでくれます。Controlからインストールできません。packagesを押して開かれるフォルダに入れてあげてください。SideBarEnhancementsサイドバーの右クリックメニューで出来ることが増えます。Autocomplete自作の定数や関数を補完して入力予測してくれるようになります。AutoFileNamehtmlでimgのsrcを設定するときにフォルダ内のファイルを入力予測してくれるようになります。他にもwidthやheightを自動挿入してくれたり。おかげで画像まわりのコーディングがかなり楽になりました。BracketHighlighterタグや括弧の始まりと終わりをわかりやすく表示してくれます。初歩的なミスが減るかと。Highlightercssで色を指定している部分に、実際に表示される色を表示してくれます。覚えることを減らすのは大事ですね。Goto-CSS-DeclarationhtmlのclassやIDにカーソルを合わせてショートカットキーを押すと、それらを定義しているcssファイルの場所までジャンプしてくれます!素敵!ただ、定義しているCSSファイルが開かれていないといけません。AssistantWordPressを使用している人専用。WordPressの独自関数などが補完されて入力予測してくれるようになります。終わりにこんな感じでしょうか?まぁ、究極的には、万人に当てはまるマストなパッケージなんてないので参考程度に。使ってていらないなと思ったら消していきまーす。3でSASS・Compass環境のコンパイルに失敗する問題こんにちは、石井です。Textを使ったコンパイル時にエラーが発生した時の対処法についてご紹介します。以前SASS・Compass環境を初めて導入したとき「一々コマンドでwatchしたりするの面倒やな...」と思い、簡単にコンパイルできる方法を探していました。koalaみたいなコンパイラも検討しましたが、コンパイラ開くのもコマンド打つのも大して変わらないという結論に至り、却下。Textと連携したコンパイル方法。ショートカットキーだけでコンパイルできるのは効率厨の僕にとって大変ありがたいです。エディタを変えようと思っていたのもグッドタイミングでした。rb_sysopenしかし、途中で問題が起こりました。それは諸々の設定を終え、試しにコンパイルしようとした時のこと。Text君がこんなメッセージを突き付けてきました。3/Packages/Compass/.sass-cache/[ここからファイルパスが続く]なんじゃそりゃと思って検索をかけてみるも、他のエラーに関することばかりで解決策が見つからず。仕方なく自分で調査したところ、原因を突き止めました。原因は「.sass-cache」フォルダ原因は「.sass-cache」フォルダにありました。Textフォルダの中のCompassフォルダの中の.sass-cacheフォルダの中のとあるファイルが見つからないよ!」ということらしい。「ん?.sass-cacheってそんなとこに作られんの?」ここが怪しいと睨み、さっそくconfig.rbをいじって.sass-cacheフォルダが作られる場所をプロジェクトフォルダのルートディレクトリに指定。コンパイルを試したら...やったぜcache_dirを設定しよう今回のエラーは.sass-cacheというキャッシュを溜めておくフォルダが変なところに作られ、それをコンパイル時に参照しようとした際に不都合が起こったのが原因のようです。config.rbから.sass-cacheが保存される場所を指定してあげればおk。場所はとりあえずプロジェクトフォルダのルートディレクトリにしときました。config.rbの好きなところに以下を記述します。'.sass-cache'同じようなエラーに困っている方、お試しあれ。.sass-cacheはどこに置くのが適切なのか?今回問題となった.sass-cacheフォルダですが、フォルダ構成によってはサーバーにアップロードする容量の増加と転送スピードの遅延を招きます。気になる人は以下のサイトを参考に、.sass-cacheフォルダが作られる場所を変更してみてもいいかもしれません。Textフォルダの中のCompassフォルダの中の...」みたいな変な場所に作らなければエラーも出ないでしょう。