レスポンシブWebデザイン

スマホスクリーンショット
スマホスクリーンショット

ピクセル工房ホームページですが、ようやくスマホ/タブレット対応しました。
今までは、タブレットではPC版がそのまま表示され、スマホではスマホ専用サイトに端末振り分けで飛ばすように設定していました。しかし、今回はWordPressでトップページをブログ化したものの、例えばfacebookなどでブログページをシェアした場合に、スマホで閲覧している人がそのリンクをクリックしても、該当ブログページに飛ばず、スマホ専用サイトのトップが表示されてしまうという現象が起きていました。これではまずいです。
そこで、対応策をいろいろ考えたんですが、結局は定番のレスポンシブWebデザインが最も妥当な方法だという結論に達しました。

レスポンシブWebデザインとは、アクセスする端末がPCでもスマホでもタブレットでも、一つのサイトを表示し、画面の横幅に応じて最適な表示になるようデザインを調整する方法です。端末振り分けなどで別々のサイトを作成することはありません。
したがって、度々サイトの内容の更新がある場合なども、一度だけ作業を行えば、PC、スマホ、タブレットのどれで見ても反映されています。これが、もしそれぞれの端末専用サイトを別々に作っていた場合だとどうなるでしょう?当然ながら、同じ更新内容をサイトごとに何度も行わなければなりませんね。

しかしこのような一見理想的なシステムに見えるレスポンシブWebデザインですが、デメリットもあります。
例えば、スマホ版を別に作成した場合なら、最適化したデータを作ったりページを減らしたりすることで容量のダイエットは可能ですが、レスポンシブの場合はPCでもスマホでも同じデータを全部読み込みますから、全体的に重くなりがちです。
それに、あくまで「対応」ということなので、「最適化」とは違います。
また、スマホ版を基準にできるだけ容量を抑えるように作った場合、PCで見たときにしょぼいページになったりするかもしれません。
それと、スマホであえてPCサイトが見たいという方への対応が難しいです。

などなど、メリットもデメリットもあるレスポンシブWebデザインですが、今のところ最も有力な方法であると言えるでしょう。

とりあえずスマホ専用サイトはおあずけ

スマホからfacebookにアクセスした人が、自動投稿された記事をクリックして、ピクセル工房のブログに飛んできた場合、端末振り分けによってスマホサイトに飛ばされてしまうと、肝心のブログの記事が読めない事態が発生してしまうため、とりあえず端末振り分けは停止することにしました。
対応策としてはやっぱりレスポンシブWebデザインが今のところは一番無難な策だと思われるので、これから変更したいと思います。今しばらくお待ちください。

※注 レスポンシブWebデザインとは、アクセスした端末の画面の横幅に応じてレイアウトやデザインを変更する方式のことです。PC用、タブレット用、スマホ用などそれぞれの端末用に別々にサイトを作らなくてもいいので、更新の多いサイトなどの場合には更新の効率がよいことがメリットですが、実はデメリットもあります。なので、全てのサイトに向いているとは言い切れず、ケースバイケースで使い分けは必要だと思います。
詳細についてはまたの機会に・・・。

ピクセル工房ホームページを改造しました

ブログを書いたら、トップページの「お知らせ」欄に自動で記事をアップできるようにしようと思い、サイトのトップページとブログページをWordPress化したのですが、いやまて? 別に「お知らせ」欄である必要はなく、それよりいっそトップページがブログそのものであってもかまわないのでは?という発想で、いきなりトップページがブログ化いたしました。

ピクセル工房2014-11-ver.2
ピクセル工房2014-11-ver.2

ただし、WerdPressは通常の静的HTMLページに比べて重いというのがネックなので、できるだけ軽めになるように、以前のような巨大な背景画像を使用しないようにしました。(それでもまだかなりでかいが、前のバージョンと比べて3分の1ぐらいの容量に減っている)
このように、ピクセル工房Webサイトは実験サイトのようなもので、いろいろ試しているので、今後も変化していくかもしれませんが、よろしくお願いいたします。

あ、でも、今回はPC用しか作っていなくて、スマホやタブレットではスマホ専用サイトのほうが表示されてしまいます。なので、今から対応策を考えなくては・・・。(やっぱりレスポンシブにせざるを得ない?)

facebookとの連携

ブログを投稿すると、自動でfacebookにも投稿できるようになりました。何度か失敗し、挫折しかけたんですが(笑)、ググって勉強したところ、設定でURLのwwwが入っているか入っていないかだけで違うサイトとして判断されたらしく、うまく連携できませんでした。原因がわかればなんということもないのですが、なぜエラーが出るのかわからないときって、ドツボにはまってしまうとどうしようもなくなりますよね。

でもなんとかうまくいってよかったです。

ウェブランブル徳島 x CSS Nite

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー(徳島版)
11月16日に開催され、私もウェブランブル徳島のメンバー・スタッフとして参加させていただきました。
会場は満席で、記念品争奪じゃんけん大会などもあり(笑)、和やかな雰囲気でのセミナーとなりました。
講師の、楠藤さん、鷹野さんのお話も、「え?そんな便利な機能があったの?」というようなウラ技的な技法の紹介もたくさんしていただき、たいへんタメになるセミナーでした。

ウラベン+CSSNite
ウラベン+CSSNite

セミナーの後は懇親会もありました。
同業者のかたたちと新たな出会いもあり、業界のいろんなお話を聞くこともでき、有意義な一日を過ごすことができました。
ありがとうございました。

吉野川第十堰付近

11月2日にリニューアルした、ピクセル工房Webサイトの背景画像について解説いたします。
今回は「ブログ」のページ。このページですね。タイトルは「吉野川第十堰付近」です。
吉野川シリーズが続いていますが、この写真は、第十堰の近くで撮影したものです。日没寸前で、野鳥が飛び立っています。3分後には完全に太陽が沈みました。ここも、ほんの数分が勝負です。

吉野川はとにかく広くて長いので、どこからどう撮っても絵になりますね。
と言いつつ、もう長い間撮影からは遠ざかっておりますが。

個人的な意見としては、夕景がいちばん楽しいです。数分の間に、景色がめまぐるしく変わるからです。露出を変えながら何度もシャッターを切ります。もちろん天候とか雲の形とか空の色が、自分の求めていたものと違うとかイメージが違うこともしょっちゅうですが、逆に予想以上の「絵」が撮れるときもありますね。

吉野川第十堰付近
吉野川第十堰付近

吉野川シラスウナギ漁

11月2日にリニューアルした、ピクセル工房Webサイトの背景画像について解説いたします。
今回は「サイトマップ」のページ。タイトルは「吉野川シラスウナギ漁」です。
これは、吉野川の冬の風物詩となっている、シラスウナギ漁の様子を撮影したものですが、シラスをおびき寄せるために川面を照らしている灯りがとても幻想的で、被写体としては、ここ吉野川の冬の定番となっています。
長時間露光をすると、船の軌跡がまるで、黄金の大蛇が川面をウネウネと滑るように泳いでいるかのごとく写ります。
しかしこれも、潮の満ち引きなどの時間帯や気象条件などによって、シラスウナギの量が全然違うらしく、そのへんは漁師のかたたちもよく知っていて、日によって百隻もいるかと思えば全く船のいない日もあったりします。なので、冬の間ならいつ行っても撮れるというわけではありません。
それと、当然ながら寒さの厳しい時期ですから、防寒はしっかりとしておかなければ、長時間露光でシャッターが開いている間に、カメラマンがフリーズしてしまいます・・・。

吉野川シラスウナギ漁
吉野川シラスウナギ漁

眉山夜景

11月2日にリニューアルした、ピクセル工房Webサイトの背景画像について解説いたします。
今回は「会社概要」のページ。タイトルは「眉山夜景」です。
眉山が最も美しい形をして、夜景がきれいに見える場所は?・・・と聞かれると、私なら即座に答えます。「新南福島の、新町川沿いの公園」と。
ちょうど、眉山とかちどき橋と新町川が一直線になるポイントがあるのです。
ここから眺めると、眉山は文字通りきれいな「眉」の形をしており、手前にかちどき橋やその周辺の街の灯りがきらめいて、その光が新町川の川面に反射してとてもきれいです。また、ここから眉山の方向は西の空ですから、夕方太陽が落ちてから完全な夜になるまでの数十分は、刻々と空の色が変わっていくので、三脚にカメラを据えたままでひたすらシャッターを切り続けると、その変化を楽しむことができるでしょう。
まだ太陽が高い時刻から夜にかけて、タイムラプス撮影してもおもしろいかもしれません。
ただし、ここもやはり吉野川橋夕景と同様に、風のない日を選ばないと、せっかくの水の反射がきれいに映りません。私も実際にこの撮影ポイントには何度も来て、三脚を立ててじっと風の止むのを待ちつつも、1回もシャッターを切ることなく撤収した日も少なくありません。

眉山夜景
眉山夜景

藍場浜公園、吉野川中流夕景、吉野川橋夕景

11月2日にリニューアルした、ピクセル工房Webサイトの背景画像について解説いたします。
今回は3つまとめて。
まずは「レンタルサーバ&ドメイン」のページ。タイトルは「藍場浜公園」です。
この写真は他の写真と違って比較的最近撮ったものですが、藍場浜公園の東の端の入り口です。植わっているこの木の名前は知りません。が、ワシントンヤシモドキと共に、南国徳島の象徴のような存在となっていますね。

藍場浜公園
藍場浜公園

 

続いて「ゲーム」ページ。タイトルは「吉野川中流夕景」です。
中流域で中州に降りてみました。広い中州では木が生えていることがあります。
画面左側の奥の方に水が流れているのが写っていますが、これが吉野川本流です。
空は、時間帯や日によって雲の動きや色が全く違ってきますので、毎日撮影してもおもしろいかもしれません。

吉野川中流夕景
吉野川中流夕景

 

そして「お問い合わせ」ページ。タイトルは「吉野川橋夕景」です。
「制作実績」ページも吉野川橋ですが、こちらの吉野川橋はさらに下流の吉野川大橋から撮影したものです。
夕景は、太陽が沈む前や沈んだすぐよりも、沈んでからしばらく経ってからのほうが、空の色がきれいですね。そして、夕景で川とか池、湖などを写す場合は、できるだけ風のない日を選んだ方がいいと思います。
この写真は、近景に船などのポイントが欲しかったところですが、運悪くこの時間帯には現れませんでした。いえ、吉野川橋の近くの左の方に一隻いますが、ちょっと遠すぎます。

吉野川橋夕景
吉野川橋夕景