13日の金曜美術館|アトリエ如瓶|ブログ・ヘッダ画像

このブログは、世の中の様々な「黙っていられん!!」ことを書くことを主旨としております。お客様や、お客様になるかも知れない方が読む可能性のあるブログではありますが、(書き手が勝手に決めたものながら)主旨を尊重し、常体文で記述して参ります。何卒お含みおきの上、お読みくださいますようお願いいたします。

AJサイトのSEO状況

皆様こんばんは。館長&代表の如瓶です。

本格的にSEO対策を施したサイトにしようとして、スマートフォン対応から着手したこのアトリエ如瓶オフィシャルサイト(以降AJサイト)ではあるけれど、作業を進めながら情報収集をしているうちに、それだけでは不充分であることがわかり、大慌てした。

私のSEO歴というと、現時点で最後の職場となった大手建材メーカーでサイト更新の仕事に携わっていた頃に、月に一度ながらほぼ3年に渡りウェブ会議と呼ばれる会議に出席していたことから始まる。
建材メーカーが契約しているウェブ制作会社や、SEOのコンサルティングをしているアナリストなどが集まり、それぞれが月次のレポートを提出して概要を説明したりするのが会議の主旨で、月に一度とはいえその道のプロたちの話には、何度も目を開かされるような思いをしたものだった。
しかしながら、その職場を離れて独立し、3年近くも経過すると、日進月歩のウェブの社会におけるSEOの様相も、様々な変化があったことを、私は知らずにいたのである。

SEOが、Search Engine Optimizationの略で、検索エンジン最適化ということであり、要は検索結果が少しでも上位に表示されるようにサイトを設計し、調整や工夫をしていくことであるのはご存知の方も多いと思うが、このSEOとは別に、スマートフォンでのウェブ閲覧が7割にも及んでいることを知ってから、AJサイトもスマートフォン対応をする必要があると感じ、作業に取り掛かったのがSEO対策をし始めるきっかけになったのである。

このサイトを立ち上げた当初は、何かデザインの依頼をしようと考える人は、思いつきでスマートフォンで検索を始めるというよりは、PCでじっくりと情報収集をするはずだと思っていたので、PC専用のサイトで良いと判断していたのだ。実際、スマートフォンで閲覧できるようにサイトを作ろうとすると、サイドバーとして補助的な情報を組み込んでいたエリアは、主要なコンテンツの下へ追いやるしかないし、リンクのボタンなども、誤操作しないように間隔を広くとった設計にしなくてはならないなど、デザイン上でも大きな制限が発生し、あまり面白みのあるデザインができなそうに思えたのも、PC専用サイトで行こうと決めた原因だったのだ。

実際のところ、スマートフォン未対応の状況が、AJサイトを立ち上げてから3年近く続いていたのであるが、「スマートフォン対応のサイトを作りますよ」とサイトで謳っていながら、そのサイトがマトモに見られるのはPCだけというのでは説得力がなさすぎる。
と、そんなわけで幾つかのお客様のサイトを制作した後、ようやく自分のサイトのスマートフォン対応に取り掛かったのである。

そうして、AJサイトのスマートフォン対応が終わり、良好な検索結果を得るために必要なことをおさらいしておこうと思って調べ物をしていると、Googleから、
「スマートフォン対応をしていないページが含まれるサイトは検索順位を落とすぞ」
という発表があったことを知り、愕然とした。
気付いていない方もあるかと思うので説明しておくと、このAJサイトは、表現者・如瓶の作品を紹介するサイトである「13日の金曜美術館」(以降13金サイト)というサイトに含まれるサイトなのであり、このページの上部にあるブレッドクラム(パンくずリスト)にも、
「トップ|ギャラリートップ|ブログ」
とあるように、AJサイトのトップページ(ギャラリートップ)のもう一つ上にトップページがあり、そのトップページから絵画などの作品を見られる13金サイトと、アトリエ如瓶のオフィシャルサイトであるAJサイトとの入口が設けてあるのだ。
本来なら、SEOを意識するのはAJサイトだけでよいのだけれど、同じドメイン内の非(半?)商用サイトである13金サイトの方もスマートフォン対応をしていないと、AJサイトもろとも検索順位が下がってしまうわけだ。
13金サイトは、1作品につき1ページという構成になっているため、ページ数は96ページあるし、スケッチ旅行記など、作品を閲覧するページとは違う構成になっているページもある。そもそも見たい人にだけ見てもらえればいいと思っていたサイトなので、うんと後回しにしようと思っていたのだけれど、13金サイトのスマートフォン対応も急務ということになってしまったのである。Googleの発表に愕然とした理由もお分かり頂けるだろう。

13金サイトの方も1カ月ほどの期間を要してスマートフォン対応を終え、これで一安心と思ったところが、またGoogleから、
「SSL化していないサイトも順位を落とすし、Chromeに『保護されていないサイト』と赤字で表示するぞ」
と発表があったことを知り、こちらも慌てて対処。この辺のことは前回のブログに書いたとおりだ。
AJサイトにしてもキャンペーンページを含め、2ページあるだけだし、メールフォームを使おうと思う人が、
「あっ! このサイトはSSL対応されていないから依頼するのはやめよう」
と思うようなケースがどの程度あるんだろうと思うと釈然としないものがあるし、やり取りされる情報の暗号化にあたるSSL対応はそれほど必要を感じられないのだが、メールフォームなどない13金サイトが「保護されていないサイト」と表示されるせいで、閲覧者に不安に思われるようなことがあっても困るので、渋々対処した次第だったのである。

まあ、一難去ってまた一難のAJサイトのSEO対策だった訳だけれど、その甲斐あって、
「ホームページデザイン 小平市」:20位
「フライヤーデザイン 小平市」:28位
「チラシデザイン 小平市」:28位
「Tシャツデザイン 小平市」:19位(以上、9/24・Google使用)
などと、こういうふうに検索してほしいなあと思う検索クエリを入力してみると、なかなか戦えるサイトになっていることが分かり、少し安心している。
一般に、検索サイトを使って情報収集する場合、ほとんどの人が検索結果の3ページ以降は見ないと言われており、とりあえず30位以内にエントリーすれば合格点なのだ。
日によっては、「Tシャツデザイン 小平市」などは10位以内にランキングしていることもあるし、13金サイト、AJサイトともに検索結果を見てみると、URLがSSL対応済みである事を示す「https」になっていないページがあり、GoogleにSSL対応が済んでいないサイトと認識されているようなので、この点がきちんとインデックスされ直せば、もう少し順位は上がるのではないだろうか。
何にせよ、アトリエ如瓶の競合他社は、SEOのプロたちがひしめき合い、組織ぐるみで潤沢な資金を使って対策をしており、その数も多い。私のような個人がここまで順位を上げられたというのは、少々誇らしく思って良いと思う。そんな気がする。
だ、か、ら、競合他社、競合他店が少なく、サイト保有率も低い業種であれば、かなり良好な結果を出せるはず。サイトを持とうと思う貴方、トップビジュアル画像を新たに設置したキャンペーンページなどをご覧の上、アトリエ如瓶にお任せあれ。

以上、黙っていられませんでした。

さらばハンバーガー

また間を空けてしまったが、久々のブログである。

PCでの閲覧しか考えていない……つまり、モバイル・フレンドリーではない形でスタートした当アトリエのサイトだったのだが、人様には「今どきのホームページは、7割がスマートフォンによる閲覧なので、対応された方がいいですよ」などと言っていたクセに、サイト公開からほぼピッタリ3年経って、ようやくレスポンシブデザインによるサイトが完成した。
長年制作側として様々なサイトを見てきた上で不満に思う部分の幾つかを解消できたサイトに仕上がったと自負している。件名は「体重を減らそうと思っている」ということではない。

世の中のサイトが、PCよりもスマートフォンで閲覧されるようになってきた理由を納得するくらい、私自身もスマートフォンを使うようになってから、調べ物も含めてスマートフォンで閲覧する機会が増えてきた。
その中で気になっていたのが「ハンバーガーメニュー」と呼ばれる≡の格好をしたボタンを押してメニューを開くもので、スマートフォンにも対応したサイトだと、大体の場合左からペロンとメニュー画面がスライドして出てきたりする。2枚のバンズの間にパティ(ハンバーグ)が挟まっている様子と似ているからこう呼ばれるようだが、スマートフォンも大型化していこうというのに、右上隅に配置されていることが多く、指を伸ばすのが億劫なうえ、メニューがペロンと出てきてそれまで見ていたページの大半を隠してしまうと、それまで何を見ていたか忘れてしまうし、下手すれば何を見ようとしていたかも忘れてしまうこともある。
要するに、使い勝手が良くないと思うのである。

なぜこのボタンがトレンドとなり常識化してしまっているのかを考えると、Facebookがこのボタンによるメニュー表示を採用していたことの影響が大きいのではないかと思う。
PCサイトで、膨大なページ数のサイトなどは、スマートフォン対応しようとすると、全面リニューアルということになり費用もかさむが、グローバルナビ部をjQueryやcssを使ってハンバーガーメニュー化してしまい、サイドバーがあればメインコンテンツ下に追いやるなどして、比較的少ない工数で対応できるのもメリットだったのだろうけど、あの使い勝手の悪さはサイト内の回遊を阻害し、高い直帰率を産み出すと思っていたのだ。

一方、PCサイトの頃の設計を引きずっていたのか、画面上端やトップビジュアルの下などにあったグローバルナビが、スクロールに伴って隠れると、フローティングメニューという形で再びグローバルナビが現れる仕組みになっているサイトはチラホラ見かけたが、これも大部分が表示されるのは上部。スマートフォンでは結局エイっと指を伸ばさなくてはならない。
画面が横長のPCでは画期的と言えただろうけれど、クリックしなくてはならない場所へのポインタの移動は少なければ少ないほど、リンクは押してもらいやすくなるのは不変の道理だ。

そこで、私が考えたのは、持つ手の左右に関係なく押しやすく、画面最下部に固定して表示されるグローバルナビ。スクロールしても画面下部に常に表示されているので、見ていたページを遮ったりしなくてよいし、スマートフォンは、殆どの人が縦長の状態でサイトを閲覧するだろうから、ページ下部の10%程度が常にコンテンツを隠していたとしても影響は少ないうえ、片手で持ち替えたりせずに見るべき主要なページを閲覧できるという、高い操作性も兼ね備えている。制作側のメリットとしても、htmlとcssだけで実装できて簡便だし、jQueryなど使うより読み込みも早いと思う。
私はこのグローバルナビの方式を、bottom0ナビ(=ボトムゼロナビ。画面の底からの距離を0として固定することに由来。)と名付けている。

と、スマートフォン時代に万能であるかのように思えるbottom0ナビだが、実は自認する弱点もある。
ナビに配置する項目数が多いと押しにくくなるばかりか、ボタン上の文字を小さくしなくてはならなくなるので、あまり多くのページをナビに組み込めないということ。2018年での普遍的なスマートフォンの画面サイズでの実感として、6つくらいが限界だと思うが、その問題も、当サイトの制作物一覧ページと料金・発注ページで、1つ答えを出した。
必要なページでは、2段目のナビを表示してしまえば良いのだ。これも何も難しい技術を使わずにできるし、当サイトで採用しているボタンのサイズであれば、それほど押し間違いは起こらないと思う。
iPhoneユーザーの私としては、もう1つ問題に感じるのは、ブラウザがsafariの場合、bottom0ナビを押そうとすると、戻るボタンやブックマークボタンのアイコンが表示された黒いメニューがせり出してきて、この動作中にはボタンが反応しなくなり、2度、3度とタップしないと行きたいページへ遷移しないという点も問題点ではある。但しこれは、主にsafariを使っている場合にのみ感じるストレスであって、検証できた1部の他機種や他のブラウザを使えば、bottom0ナビの回遊性の高さを満喫できる。
結局、ハンバーガーメニューの煩わしさに比べれば、大した事ではないと私は思っている。

ただまあ、サイトの性質にもよるのだろうけれど、スマートフォンでの閲覧が中心となるWebの世界で、100ページに及ぶようなサイトが、全体をくまなく回遊されるようなことは現実的ではないと思えるし、Web上に存在するサイトの全てがスリム化していくのではないかと思えるので、きっと私の考案したbottom0ナビは有用になると思う。いや、私がこれを主流にしていくのだ!

……と考え、いっそ実用新案でも申請しようか……と思っていたところ、ちょっと調べてみると、ハンバーガーメニューの問題点について述べた記事が幾つもヒットした。まあ、そりゃそうだが、この道の権威であるジェームズ・アーチャーという人などは、「劣った醜い撲滅すべきものである」などと言いつつ、データ分析結果を元にして、私が直感的に感じていたことと概ね同じ解説をしているようで、bottom0ナビの普及にますます自信を持ったりするわけである。

と、今回のリニューアルを足がかりとして、bottom0ナビを普及させていこうと思うのだけど、肝腎の自分のサイトをスマートフォン対応させたのが、かなり遅くなったのがお恥ずかしいところではある。

ようやくアトリエ如瓶ギャラリー公開

またちょっと間を空けてしまったが、三度目のブログ。

間が空いてしまったのも、ひとたび問題解決できて順調だったので、何とか13日には公開に漕ぎ着けようと頑張っていたのだが、制作物一覧ページにjavascriptによるLightBoxを仕込もうとしたところ、設置に成功した代わりにヘッダ、フッタ、右サイドバーなどの同じくjavascriptを使って読み込んでいた部分が表示されなくなってしまった…というトラブルに見舞われたためだった。

javascriptも、テーブルでのレイアウトによるコーディングが中心だった頃から部分的にちょくちょく使ってはいたが、それらはごく一部分だったし、とても使いこなしているというレベルではなかった。
アトリエ如瓶ギャラリーでは、共通部分を外部から読み込むとか、トップビジュアルの画像の自動的な切り替えなどをjavascriptを使って初めて盛り込んだのであって、どうにか駆使して公開にこぎつけただけでも、ご褒美に自分を女性が相手してくれるお店に連れて行って飲ましてやりたいくらいなのだが、本当にこれで大丈夫なのかなあと思っていたら、製作も大詰めになってから、愕然とするような不具合に出くわしてしまったのである。

タブブラウザが一般的になって、拡大する画像だけを新規タブで開くような動作は、やはり大げさに感じるし、どこか前時代的な処理のような気がするので、LightBoxで拡大画像を小ぢんまりと(?)見られるようにしたかったのだが、当面は保留とすることにした。
ただ、諦めきれずに原因を探ってみると、javascriptのonLoadという処理が、同一ページ内で2回以上使われると、最後に読み込まれた部分以外は無効となってしまうという記述を見つけることができ、対処法も紹介されていたのだが、自分でやってみるとうまく行かず、自分の不勉強とjavascriptの奥深さというか難しさというか、そんなものを感じずにはいられなかった。

LightBoxの実装に成功したとしても、それが閲覧者の関心を集めるのも、あと2~3年くらいなのではないかと思うし、トップビジュアルの画像の切り替えなども、見る人によっては陳腐なのかもしれない。「新しい技術」などという呼称は儚いものだし、技術的な部分は外注してしまうというテだってある。
そう考えると、デザイナーを自称し、存在価値を色あせないものとするためには、技術以外の部分……発想力とか、配色のセンスとか、ユーザビリティの高いサイトの設計とか、そういう部分で勝負できるようでありたいと、私は考えていて……もう寝ます。ここ数日あまり寝てなかったりして。

想定より1日遅れたけれど、どうにかUPできてめでたしめでたし……であります。ご用の方、遠慮なくご発注の程を。