サイトのデザインを修正した

2015/05/21 00:15 | カテゴリー 日記 | コメント

自転車で通勤しましょのスクリーンショット

ここ2ヶ月くらい、細々と続けていたのですが、ようやくリニューアルしてもいいレベルになったかなと思ったので反映させておきました。

自転車で通勤しましょ

前回のリニューアルでは、流行りのtwitter bootstrapを使ってスマホで見えればそれでいいんでしょ？みたいな気持ちでやったせいか、変更直後からGoogleの検索ランキングがめっちゃ下がってまさにリニューアル失敗という感じでした。それで心が折れてなかなかやる気になってなかったのですが、業務でbootstrapを使うようになったことと、middleman（静的サイトジェネレーター）に詳しくなってきたことで、またやってみようと思う気持ちになったので、今度はちゃんと取り組もうと思ってやってみました。

考えたことは、主に3つ。

  • スマホ対応は必須（Googleの検索順位にも影響するようになったし）
  • ターゲットを意識したデザインにする
  • メニューを複数つけてページ遷移を面倒にしない

スマホ対応

Chromeデベロッパーツールを使っているところ

bootstrapなど、css frameworkを使うとこのあたりは非常に楽になります。楽にはなるけれど、まぁ見えてるからいいか、とエンジニア脳で考えてしまうとそこで止まってしまいがち。なので、エンジニア脳は一旦置いといて、デザイン脳というか自分がユーザーならという気持ちで考えました。middlemanを使うと、ライブリロードが使えるので、デュアルディスプレイにして、Chromeのデベロッパーツールを表示して、iPhone5辺りをデバイスシュミレーターとして選択しておいて、微調整を繰り返しました。メディアクエリを使って、スマホの場合とPCの場合での見た目の調整も多少作りこみました。まぁそこまで多くはないですが（基本的にはbootstrapがやってくれるから）。まだ気になる部分もあります…。

ターゲットを意識したデザイン

このサイトを見る人は自転車通勤を始めたいと思っている人たちだと思うので、いかつすぎない感じで、始めてみようかなとポジティブに捉えられそうな感じを意識しました。本屋に寄った時にいいなぁ！と思った素材集を買っていたので、それをフルに使いました。足りない素材は後々自作していけたらなぁと思いつつ、今は素材集のもののみを活用しました。

メニューを複数つける

スマホで記事を読んでいると、最後のほうまで移動したあとにはすぐ次の記事にいくか、トップに戻れるような仕組みがないと面倒なので、ヘッダーメニューとフッターメニューに同じものを付けました。サイトに長く滞在してもらえるようにするには、次の記事への移動のしやすさが大事だと思うので、順々に移動できるようにしました。冗長でもいいかなと割り切りました。

まとめ

  • コンテンツを作り込んでいく作業は根気との戦い。面倒臭がらずにちょっとずつでもいいからやること。
  • bootstrapをちゃんと覚えたらコンテンツに集中できる。
  • そうはいってもスマホ対応やろうと思うとやっぱり面倒。だけど頑張れ。
  • middlemanまじ便利。
このエントリーをはてなブックマークに追加

書評：視覚マーケティングのススメ

2015/05/18 22:52 | カテゴリー 本 | コメント

前回、『売れるデザインのしくみ』の書評を書いたけれど、その中で紹介されていたのが本書。

この本には、デザインでできる多くのことが書かれている。
売れるデザインのしくみで書かれていたトーンアンドマナーについても触れているが、どちらかというと実践的な本で視覚的にわかりやすく教えてくれている。そして、それによってどのような効果があるか、ということも。

とてもためになったのは、以下の3点。

  • 実用性重視かデザイン重視かは二者択一ではない
  • デザインは先に決めてしまう
  • デザインで人材マッチング力を上げる

実用性重視かデザイン重視かは二者択一ではない

どうも、「デザインがいいと機能的に物足りなくなっている」、逆に、「デザインはイマイチだが実用性がある」というものに慣れすぎているのか、共存することはほとんどないと思い込んでいないだろうか？本の中では、デザインと機能性の共存ができているものの例としてApple製品が挙げられている。
高いデザイン性と高い技術力は共存してこそ顧客満足度が上がるので、エンジニアが試作品を作る段階でデザイナーと共同で動けたらいいと書いてあって、ほんまに頷くことが多いのだけれど、個人の活動の際にコラボレーションするのはなかなか難しいので個人レベルでは二の足を踏んでいる…。

デザインは先に決めてしまう

ここでいうデザインとは、商品の視覚効果を先に決めてしまうということだった。つまり、見る人の反応を先に決めてしまうというものだ。「すごい！」「びっくりした！」「感動した！」などの反応・感情を先に決めておくと、軸が決まるのでブレることがなくなるので、手戻りも少なくなるはず。プログラム作るときとかはなんとなく作り始めて後々ウリを考え始めたりすることがあるのだが、どうしても無理やり感がある場合もあるので、そういう発想法があることは覚えておきたい。

デザインで人材マッチング力を上げる

これは、日本中の多くのサイトが損している部分だと思うので声を大にしていいたいが、この会社は自分向きである、というフィルターにひっかかるかどうかはその会社のサイト次第であるということだった。そして、欲しい人材像がそのサイトにデザインとして描かれているかどうか。

例では、女性の採用が全然うまくいかずに採用にお金がかかっていたが、欲しい人材像に合わせて採用ページをリニューアルしたら100人くらい応募が殺到したということだった。
ちなみに、求人サービスなどを使うと採用された社員の年収の3割くらいが手数料としてかかるので、年収400万の人を雇ったら120万くらい。それでもなかなかいい人材がこない、とのことだった。
しかし、100万円くらいかけてサイトを作り直したら、優秀な人材が自分から応募してくるようになったのでコストが削減されたという。本当にお笑い話のような感じだが、たぶん自分たちは普段自分の会社のサイトとかあんまり見ないからそういうところに対するアンテナが完全に麻痺してるんだと思う。もしくは他人事か。

デザインでコスト削減・人材発掘と、デザインの力はとどまることを知らない。

デザインは誰でもできるのか？

私はこの本を、日本版ノンデザイナー・デザインブックじゃないかなと思っている。第2部からは、デザインセンスを磨く5つのポイントが書かれているのだが、そこを読んでそう思った。特に、日本語フォントについての話などは面白かった。『デザインの9割は文字組みで決まる』と書かれているのだが、私はそこまでフォントに気を使ったことがない。見た目的にひどくなければOKくらい…。しかしノンデザイナー・デザインブックとウジトモコさんの本を読んできて意識が変わってきている。
フォントを変えるのは、誰でもできることだ。もちろん、商用フォントを買って云々というのは敷居が高いところなので、難しいが、もっといろんなフォントを試してみようと思った。

デザイナーさんもコンサルタント業みたいなところがあるんだろうなぁとしみじみと読ませてもらった。お客さんのビジネスのことをきちんと考えていないと書けないことばかりだし、そういう思考のある人だと信頼できる。我々のようなエンジニアもだが、発注側に回りそうな人、デザインの可能性を小さく考えてるデザイナーさんなど、多くの人に読んでもらえたらいい本だと思う。

あと、読んでいる最中に呟いていたら、ウジトモコさん本人からメンションもらった！

私も良い本だと思います！！

このエントリーをはてなブックマークに追加

Herokuで高速化するために行ったことの備忘録

2015/05/12 16:44 | カテゴリー Ruby, Ruby on Rails | タグ | コメント

Google PageSpeedが終了するよという情報が流れてきて、初めてGoogle PageSpeedを知った。どんなものかと思っていたら、URLを入力したら高速化できていない部分を指摘してくれるものだった。うわー、もっと早く知っていれば…。私が開発に携わっているサービスも徐々に表示速度が遅くなってきていたので、これを参考に高速化を行ってみた。

ちなみに2015年5月12日現在、本番環境はHerokuでプログラムはRails4.2でできている。

Google PageSpeed

静的リソースのキャッシュの有効期限を設ける

PageSpeedで怒られた中でズラーッと並んでいたのがこれだったので、とりあえず設定することに。

参考ページ: qiita: herokuでブラウザのキャッシュを利用する

config/environments/production.rbに以下を設定。

  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.static_cache_control = "public, max-age=31536000"
  config.assets.compress = true
  config.assets.compile = false
  config.assets.digest = true

追加したのは2行目と3行目だが、2行目だけでもいいかもしれない。

これをcommitして、Herokuのstaging環境にデプロイ。そしてPageSpeedでチェックしようとしたら、ステージングにはBasic認証をつけていたのだった…。テストできんやん…と思っていたら、Chrome Extensionを入れるとできる模様。

Chrome Extension: PageSpeed Insights

そして分析したところ、警告がでなくなった。有効期限がなかったらずっとキャッシュするかと思ってたんですが、違うんですかね…。

htmlのgzip圧縮

htmlが圧縮されてないよと言われた。静的ファイルは圧縮してるんだけれど、Railsが出力するhtmlは圧縮できてなかったのか…と思い、調べたところ、以下の参考ページを見つけた。

herokuで静的ファイルをgzip圧縮して配信する

これに倣って、heroku-deflaterを導入してみた。

Gemfileに追加。

group :production do
  gem 'rails_12factor'
  gem 'heroku-deflater'
end

そしてインストール。

bundle install

そしてcommit。Herokuのステージング環境にデプロイして何回か時間を計測。

これを行ったら、明らかに速くなった。ここまでで、完全に読み込みが終わるまでに5〜6秒くらいかかっていたのが、1秒〜3秒くらいになった。

画像のリサイズ

PageSpeedに指摘された。大きい画像をリサイズして読み込んでいるところがあったので、それを読み込むサイズにリサイズしておいた。やはり文字を削るよりも素材を削るほうが容量は減る。今度でいいわーと思っていて忘れていたのを思い出させてくれた。ありがたい、ありがたい。

まとめ

キャッシュの有効期限や、出力するhtml自体をgzip圧縮するというのは完全に見落としていた…。JSやCSSなどの静的ファイルの圧縮はできていたので、もう大丈夫だろうと思っていたが、まだまだあるものだ。

このエントリーをはてなブックマークに追加

書評：売れるデザインのしくみ

2015/05/10 23:48 | カテゴリー 本 | コメント

デザインについての考え方を学びたくて購入。
この本を読んで、とてもよかったと思う。著者がこの本の中で前に書いた本についても紹介していたので、Amazonで購入しといた。それもまた読むのが楽しみだ。

副題にあるのだが、「トーン・アンド・マナーで魅せるブランドデザイン」のトーン・アンド・マナーの重要性が語られている。トーン・アンド・マナーとは伝えたい雰囲気や世界観のこと（以降、トンマナと略す）。デザインによってサービスやプロダクトのイメージが決まってしまうのだが、デザインとは見た目のことだけではなくて伝えたいメッセージを視覚化したものであると。

そして、ブランドイメージの浸透には時間がかかる。コロコロと印象を変えるようなことをやってはならない。デザインとブランドマーケティングは表裏一体なので、ここがブレるとマーケティングも上手くいかなくなる。

デザインは商品なりサービスなりのコンセプトをかためていくところから参加できるほうがよくて、コンセプトがブレブレの状態で発注されても、いいものは出来上がらないらしい。というのも、方向性を決めて持っていっても、ステークホルダーに違うコンセプトのほうを重視するような発言をされてしまい、二転三転するうちにデザインに不信感を抱くようになってしまったりするそうだ。デザインする側も万能ではないので、後出しジャンケンのように違うコンセプトのことを言われると困るだろうし、まとめきれなくなるだろう。企画時から手伝ってもらえるとよさそう。

著者は、デザインは投資であるということを言っている。ブランドイメージを貯金のように少しずつ高めていくわけだ。そのために気にしないといけないことは、山ほどありそうだが、どれも納得がいく。オリジナリティーがないと、ブランドイメージはできないし、テンプレを使うということは、同じようなイメージのものがたくさんあるので、ブランドイメージが定着せずに埋もれてしまう。

後半は実践編で、よく聞くデザインのキーワードに関して取り上げてあった。写真の効果的な使い方・タイポグラフィ・グラデーション・アイコンやキャラクター・テクスチャー・コントラスト・ホワイトスペース・フォント選びなどなど…。
また、ウェブと印刷物を考える面でのことなどについても言及されていた。ほとんどRGBで済ませている自分にとってはCMYKの違いの話などはとてもためになった。

レギュレーション作り（トンマナを揃えるための具体的なシステムと、やってはいけない決まり）がとても大事という話もよかった。例が、外国の、街並みをの美観を壊さないように作られた建物だった。日本でもレギュレーションがあるところは守られているが、田舎のほうだと割とめちゃくちゃに建物が建っていて美観が損なわれていたりするから、そういうことが起きないようなルールと、やってはいけないルールを作ろうということだ（建物でいえば、この地区では3階建てはダメとか、洋風建築はNGとか）。

デザイナーの人が読んでもいい本だと思うし、よくデザインを発注する側や、なかなかブランドイメージを確立できずに悩んでいる人が読んでも面白い本だと思う。

今の時代はデザインとマーケティングはかなり近しい。ユーザーの目も肥えてきていて、ハイクオリティのものに慣れてしまっているので、トンマナがすぐに伝わるようなものでなければ、すぐにフィルターから外れてしまって見てもらえないのではないか？コンセプトやトンマナがぶれている状態で小手先の技術でマーケティングしようとしてもおそらく効果が出づらいだろう。

ノンデザイナー・デザインブックも面白かったけれど、この本も面白かった。ターゲッティングを考えたりする上でもまた読み返したい本だ。

このエントリーをはてなブックマークに追加

PCの80番ポートでvagrantの80番ポートにアクセスする方法

2015/04/19 00:23 | カテゴリー Mac, PHP, WordPress | タグ | コメント

今日はphpMyAdminと戦ったり、結構疲れています…。

ようやく開発できるようになったわーと思って、mod_rewriteを使えるように設定した後、バックアップデータをMySQLに入れて、ようやく元のサイトが動いた！と思ったのですが、サブディレクトリに置いているブログ（いま見ているブログの元になるやつ）にアクセスしたら、なぜかポート番号が失われてしまいました…。

どういうことかというと、

  1. http://localhost:8080/ にアクセスすると見れる。
  2. http://localhost:8080/foo (フレームワーク上の仮想ディレクトリ)にアクセスすると見れる。
  3. http://localhost:8080/blog/ にアクセスすると、http://localhost/blog/にリダイレクトされる

という感じです。ポート番号が失われてしまい、vagrant上のウェブサーバではなく、Mac自身のディレクトリにアクセスしようとしてしまってるので、当然見れません（Mac上にWebサーバ立ててないし）。

解決策を考える

解決策を考えると、思い浮かぶのは、

  • /blog/に移動してもポート番号を引き継ぐ方法を探し出す
  • http://localhost/にアクセスしたらvagrant上のウェブサーバにアクセスできるよう、フォワーディング設定を書き換える

の2つです。
1つ目は、まず最初に挑んだのですが、どうも糸口が見えなかったので、諦めました。
そして、2つ目にしたらすぐに解決するだろうとは思っていたのですが、Macの80番ポートを使うのはなー…と気が引けていたのですが、vagrantを起動している間だしいいかと思って割り切りました。

fowarded_portしても動かない…

そこで、Vagrantfileを修正してみたのですが、動きません。
元になっているVagrantfileは、vagrant-php-boxのものです。

Vagrant.configure("2") do |config|
  # ...
  forward_port = ->(guest, host = guest) do
    config.vm.network :forwarded_port,
      guest: guest,
      host: host,
      auto_correct: true
  end

  forward_port[80]  # nginx/apache
  # ...

Vagrant的には1024番ポート以下のウェルノウンポートは、フォワーディングの対象にはならないようです。これは困りました。しかし、解決策がありました。

SSH経由で80番ポートを転送する

SSH経由で80番ポートのアクセスを転送します。

sudo ssh -p 2222 -gNfL 80:localhost:80 vagrant@localhost -i ~/.vagrant.d/insecure_private_key

初回は、鍵の受け入れがあります。あと、毎回vagrantユーザーのパスワードを求められます。デフォルトパスワードはvagrantです。
vagrant up後に、これを行うことで、http://localhostにアクセスするとvagrant上のサーバの80番ポートにアクセスできます。素晴らしい。

SSHするところまで自動化する

しかし、これ毎回vagrant up後にSSHをしないといけないので、忘れてしまいそうです。しかもコマンド長いし。そこで、vagrant upの中にこれらを組み込んでしまいましょう。

組み込むためには、vagrant triggers pluginが要ります。これは、up, reload, halt, destroyなどのイベント発生時に呼ばれるコールバックを設定することができるプラグインです。インストールは簡単です。

vagrant plugin install vagrant-triggers

インストールが終わったら、Vagurantfileに以下のコードを追記します。

  
  # 使わないのでコメントアウト
  # forward_port[80, 8080]  # nginx/apache

  config.trigger.after [:provision, :up, :reload] do
    system('sudo ssh -p 2222 -gNfL 80:localhost:80 vagrant@localhost -i ~/.vagrant.d/insecure_private_key')
  end

これでvagrant upまたはvagrant reloadしてみましょう。

そうすると、最後にパスワードを求められるので入力するのみになります。SSHのパスワード自動化はできるようですが、そのツールを入れること自体がリスクになるので、今回はここまでにしました。

参考URL：

このエントリーをはてなブックマークに追加