staart-blogtitle
Releases

[Staart] お問い合わせ方法とアイコン小話

こんにちは!
Staartをご利用いただいている皆様、いつもありがとうございます。
おかげさまでアクセス数をはじめツイッターアカウントのフォロワー様も着々と増えております。
これから開催されるライブ件数も800件を突破しました!

アクセスはこちらからどうぞ↓

https://www.staart.jp/

お問い合わせ方法

Staartのデータ管理には細心の注意を払っておりますが、もしご利用される中で実際の情報と違う内容やバグなどを発見されましたら、報告フォームよりお問い合わせいただけますと幸いです。

ライブ情報に関するお問い合わせは詳細ページ、アーティストやライブハウスに関するお問い合わせは各プロフィールページからフォームのリンクをご用意しております。

blog-0

頂いた内容につきましては早急に対応いたします。
どうぞよろしくお願いいたします。

アイコン小話

次は、Staartで使用しているアイコンに関してちょっと書いてみます。

Staartではライブ・ユーザー・アーティスト・ライブハウスに関してオリジナルのアイコンを使用しています。サービスの雰囲気に合うよう留意しながら以下の4種類をそれぞれ制作しました。

blog-2

特にライブに関しては完全にオリジナルの意味を表すアイコンなので、これらの意味を把握しておくともっとサービスが使いやすいんじゃないかと思います。さり気なくマイクのコードがライブマークを意識してたりします。

現在は上のようなカラーリングで使っているアイコンは、リリース当初ちょっと雰囲気が違いました。

blog-3

ライブっぽさを意識してグラデーション背景だったんです。
これはこれで個人的に気に入っていますが、全体的にフラットなデザインとの質感の差と、縮小した時の見栄えも考慮して修正しました。
ちなみにグラデーションを作ってからの強い色調補正は色の境界線が出来てしまって綺麗にいかないという勉強にもなりました。

サイトで使用する時は最小で25px四方とかなり縮小されるため、アイコン自体の視認性には悩んでいます。
試行錯誤しながらベストなところに落ち着けたらなと思います!

このアイコンがどんな風に使われているかまだ見ていないという方はこちらから!↓

https://www.staart.jp/

ユーザーの事前登録twitter公式アカウントのフォローもよろしくお願いします!

標準
staart-blogtitle
Releases

[Staart] UI小話と更新情報

こんにちは!雨の日が続きますね。
そんな中でもハレノヒではがっつりと開発進行中です!

今回はStaartのUIについてと更新情報をお届けしたいと思います。
その前に、Staartって何?という方はこちらから↓

https://www.staart.jp/

StaartのUI小話

Staartの開発をする中で大事にしていることは情報をできるだけたくさん、見やすく表示することです。

メニューや検索バーを縦60pxのヘッダーに収めて、ライブ情報を載せる領域を少しでも広く確保しています。
これは表面的にはPinterestのスタイルに近いのですが、扱っている情報がもう少し複雑なため、テキストのサイズや配置に気を配りました。様々な長さの文章が入ることを想定して省略などを駆使しながらレイアウトするのはwebならではだと思いました。
また、適宜タブを使って必要な箇所にすぐたどり着けるように作っています。

そして何より、各ページの上部に余計なものを入れないということにはかなり注意を払っています。
たとえばSNS関係のいいねボタンなどを上部に入れればクリックしやすいです。けれどその分ファーストビューに表示される情報が減ってしまいます。各SNSに拡散していただけることも勿論ありがたく、Staartでも重要視していますが、少しでも多くのライブ・イベント情報を配信したいという立場から優先順位を考えた上で現在の配置になりました。

前回更新したピックアップバナーエリアも、ピックアップという特別感(他とは違う見え方)を演出しつつ、使用面積は出来るだけ抑えるという条件のもとエンジニアとデザイナーとで相談し合いながらレイアウトを決めました。
開発中のエリア別検索用のナビゲーションについても、使い勝手とコンパクトさを両立したUIを作るのは結構苦労したので、個人的にも実装が楽しみなところです。

これからユーザーが増えていった時に、現状のUIが最適ではないということが間違いなくあると思います。
自分たちも1ユーザーとして、このUIでいいのかどうかを常に見直しながらブラッシュアップしていきたいです。

更新情報

では、ここからはStaartの更新情報です。
日々少しずつ進歩していっております!

blog-0612

ライブ詳細ページの横にもPickupライブ・イベントがランダムで3つ表示されるようになりました。
トップページで見逃してしまっても、これ、注目です。

そして、概要の中のテキストURLにリンクが貼られるようになりました。
今までご不便をおかけしましたが、これで予約ページやオフィシャルページにアクセスしやすいですね。

そしてそして、ユーザー機能実装に向けて、お気に入り機能が追加されました。
☆のアイコンがお気に入りを表します。
これを活用すれば、気になるライブ・イベント情報をコレクション出来ちゃいます。
はやくポチッと押したいです。

事前登録受付中です!

blog-0612-2

ただいまトップページより、ユーザーの事前登録を受付中です!
Staartのユーザー機能実装をいち早くお知らせいたします。
ご登録お待ちしております!!

Staartのツイートも、アーティストご本人や所属事務所などからのリツイートをいただいています。
フォロー・リツイート・お気に入りお気軽にどうぞ!
Staart公式アカウントをフォローしてライブ情報をチェックしよう!
@staartjp

それでは引き続きStaartをよろしくお願いします!
アクセスはこちらからどうぞ↓

https://www.staart.jp/

標準
staart-blogtitle
Releases

[Staart] ピックアップバナーエリアを追加しました!

こんにちは!梅雨入りして雨の日が続きますが、明けたらあっという間に夏が来ますね。
夏といえば!ライブ!!!

Staartでは夏フェスの情報も随時更新しております。ぜひチェックしてみて下さい!
アクセスはこちらから↓

https://www.staart.jp/

新機能追加しました!

今回は、昨日紹介記事を書くのと同時に実装された新機能をご紹介いたします。
新しく追加されたのは[ピックアップバナーエリア]です。

blog-1

これはライブ一覧ページの最上部についたバナーエリアで、いまアクセス数が多い注目のライブや特集などのおすすめコンテンツをご紹介していきます。
ライブが沢山ありすぎてどこを見たらいいか分からない時や、サクッと情報を拾いたい時などにどうぞ!

ちなみにこのバナーエリアは他のコンテンツと違って横スクロールです。
必要に応じてスクロールしてご覧ください。

Staartの成長をお楽しみに!

ただいま開発中のユーザー機能(コメント投稿・お気に入り機能など)便利検索(エリア・日付検索など)のリリースも待ち遠しいですが、さらにミーティングなどで面白いと思ったアイデアも盛り込んでまいります!

また、もしStaartにこんな機能があったらなというご要望などがありましたら
info@halenohi.jp
までお送りいただけますと幸いです。

登録されている[これから開催されるライブ数]700件突破!
どんどん成長していくStaartをよろしくお願いします!!

https://www.staart.jp/

標準
staart-blogtitle
Releases

新音楽サービスStaartはこんなサービスです!

お久しぶりです覚えてますか!森田です。
しばらくブログを書いていない間に色んなことがありました。
新たにエンジニアさんを迎えて開発チームがだいぶ盛り上がっていたり、Staartが前回の記事の通りようやくリリース報告が出来るまでになったりと、刺激だらけの日々です。

特にStaartは、私が入社前から構想されていたものがついに形になったんです。胸熱です。
どんなものか見てみたいという方は↓からどうぞ!

https://www.staart.jp/

とはいえ、まだまだ各種機能は絶賛開発中です。
今後さらに便利に、より楽しく使っていただけるように頑張っておりますのでお楽しみに!

さて今回は、そんな新音楽サービスStaartについてご紹介したいと思います。
まだ全然知らないという方!ちょっと見ただけという方!要チェックですよ!!

【ライブ・イベント情報ナビ Staart】とは

“Staartは、みんなの街のライブ・イベント情報を検索・発見するサービスです。”

公式の紹介文がこちらです。

[みんなの街=日本全国のライブ・イベント情報を集めて、その情報を検索できるサービス]ということなんですが、それだけじゃありません。ただ探すだけではなく、ジャンルや位置情報に応じて関連ライブを紹介して[今まで見逃していたかもしれないライブ・イベント情報を発見できるサービス]なんです。

多彩な発見ルート

Staartではライブ・イベント/アーティスト/ライブハウスの3種類の情報を集めているため、それぞれをベースに探していくことが出来ます。
関連のおすすめ情報からも、意外な発見があるかも知れません。
今はまだ公開していないユーザー機能が実装されたら、ユーザー同士のつながりからも自分好みの情報を見つけられるはず。

このように多彩な発見ルートをご用意して、行きたい!と思えるライブ・イベント情報とユーザーとをつなぐサービスを目指しています。

もっとライブを楽しむ仕組みづくり

“もっとライブを楽しもう!”

こちらはキャッチコピーです。

もっとライブを楽しむとはどういうことか?
それは、行きたいライブを見つけて→行って体感し→レビューして残すことなんじゃないかと思います。

「ライブの体感」自体の提供は難しいかも知れませんが、その「動機作り」と「感想をシェアし合う場」があったら。情報を発見したところが体感の始まりになり、同じライブに行く/行った仲間同士がつながる、そしてそれが次へのモチベーションになれば、きっと体感が何倍にも広がるんじゃないでしょうか。

このさがす→つながる→のこすというプロセスを通して、今までよりもっとライブを楽しんでいただけたらと思います。

Staartでこんなことが出来ます

どんなサービスなのかを知っていただいたら、次は実際にどんな機能があるのかをご紹介します。
開発は常に進行中なので2014年6月10日時点での機能紹介になります。
最新情報はまたこのブログなどでお知らせしていきますね。

メニュー説明

blog-0

一覧ページを開くとこのようにライブ情報が並んでいます。
右上が検索バー、左上がメニューボタンです。

blog-1b

メニューの内容はこんな感じです。
いつも左上にいますのでいつでも使って下さい。

Staartがもつ3種類のライブ関連情報

[一覧]

tab

一覧ページをスクロールしはじめると、タブバーが出てきます。
このタブもしくは先ほどのメニューから一覧表示をライブ・イベント/アーティスト/ライブハウスに切り替えられます。

また、それに合わせて検索バーも切り替わっているので、3種類の情報をそれぞれ閲覧・検索できます。

[ライブ・イベント]

stream

Staartの情報はカード形式になっています。
まずライブはカバー画像・詳細情報・アーティストの情報で構成されています。
すこし細かくはなりますが、下記のようにリンクしています。

  • カバー/ライブタイトル:ライブ詳細
  • ライブハウス名:ライブハウス詳細
  • マイクのマーク/and more…:ライブ出演アーティスト一覧(ライブ詳細)
  • 吹き出しのマーク:コメント一覧(ライブ詳細)※開発中
  • 各アーティスト名:アーティスト詳細

これらを利用して気になった箇所からどんどん探していってみてください。

detail

ライブ・イベントの詳細表示はこのような感じです。
近くのライブハウスで開催されるライブ情報が関連情報として右側に表示されています。
この画面を閉じる時は、右上の×ボタンか周囲の暗い部分をクリックすると一覧に戻れます。

4

下部に用意してあるコメント機能はただいま開発中です。
公開されたら、行きます宣言したり感想を書き込んだりと楽しく使っていただきたいです。

[アーティスト・ライブハウス]

アーティストとライブハウスは、登録してあるこれから開催されるライブ数と一緒にカードになっています。
Staartのロゴにもあるイナズママークがライブを意味するマークです。※重要
詳細ページに行くと、これから・これまでのライブに加えて、そのアーティストがどんなライブハウスでライブしたか、そのライブハウスではどんなアーティストが出演したかもそれぞれ見ることが出来ます。

artist

こちらがアーティスト。

venue2

こちらがライブハウスです。

検索方法

先ほども書いたように、現在は

  • ライブ・イベント検索
  • アーティスト検索
  • ライブハウス検索

の3種類をご用意しています。

今後はこれらに加えて、エリア検索・日付検索なども追加していく予定です!

「ここから近いライブハウスでどんなライブやってるんだろう」
「来週はどんなライブがあるかな?」
「今まで知らなかったバンドを開拓したい!」

たとえばこういった声に、Staartを見れば応えられるのが目標です。

公式Twitter

@staartjp

Staartの公式Twitterでは、登録されているこれから開催されるライブ情報をご紹介しています!
フォローしたらライブのウッカリ忘れが少なくなるかも?!

リツイート大歓迎、フォローお待ちしております!!

よろしくお願いします!

長くなりましたが、Staartがどんなサービスなのか少し分かっていただけたでしょうか?
Staartへのアクセスはこちらです!↓

https://www.staart.jp/

ただ今、ユーザー機能公開時にいち早くお知らせする事前登録を受け付けております!
今までよりもっとライブを楽しんじゃいたい方はぜひ!

どうぞStaartをよろしくお願いいたします!!!

標準
IMG_5313
Releases

新音楽サービスStaart(スターート)をリリースしました!

ハレノヒから新しい音楽サービスStaart(スターート)をリリースしました。

Staartは日本全国のライブ・イベント情報をあつめて、ジャンルや位置情報に応じて次々とおすすめのライブ・イベント情報を紹介してくれるサービスです。

サイトは自由に見られますが、ユーザー機能はまだ公開していません。
しかし一日も早く皆さんに使っていただきたいので目下開発中です。

ユーザー機能のリリース時にすぐご利用していただけるように招待希望の方専用のメールアドレス登録フォームがトップページに用意してあります。

是非Staartを御覧ください!そしてライブをみつけて見に行こう!

ライブ・イベント情報ナビStaart(スターート)

IMG_6953

IMG_5313

標準
ruby-on-rails
Development

[Rails] モデルのデフォルト値セットをService Objectにしてみた

RailsのようなMVCアーキテクチャのフレームワークではControllerに処理を書くことを極力避けることでFat Controllerにならないようにするのはもう常識と言えるまでに浸透してますよね。

しかし最近はModelに何でもかんでも詰め込みすぎてFat Modelにならないようにしようという動きも有ります。
僕は最初、あぁそれでConcernに分けていくのねと思ったのですがConcernだけでかたづく問題ばかりではありません。

詳しくは
ここ 7 Patterns to Refactor Fat ActiveRecord Models
またはここあたり Object Oriented Rails – Writing better controllers
を読むのがいいようですが、そのなかにService Objectというのがあります。

今回そのService Obejctでモデルのデフォルト値をセットする処理を書いてみましたので紹介します。

まずTask管理をするRailsアプリがあったとしますTasksController#newでこんなコードになってました。

class TasksController
  def new
    @task = Task.new
    @task.category = category if params[:category_name].present? && (category = Category.find_by_name(params[:cateogry_name]).present?
    @task.due_date = params[:due_date].present? ? params[:due_date] : Date.tomorrow
  end
end

ごちゃごちゃしていて分かりづらいですね。

いきなり結果ですが、前述のブログを参考に以下のように変えてみました

class TasksController
  before_action :load_task_default_value_service, only: [:new]

  def new
    @task = Task.new
  @task = @task_default_value_service.set(@task, params)
  end

  private
    def load_task_default_value_service(service = TaskDefaultValueService.new)
      @task_default_value_service ||= service
    end
end

大分スッキリしました。

で肝心のService Obejctは app/services ディレクトリを作って配置します。このとき config/application.rb で config.autoload_path に app/services を追加しておかなければいけません。

app/services/task_default_value_service.rb

class TaskDefaultValueService
  def set(task, params)
    @params = params
    task.category = @cateogry if valid_category_name?
    task.due_date = due_date
  end

  def valid_category_name?
    @category = Category.find_by_name(params[:cateogry_name])
    @params[:category_name].present? && @category.present?
  end

  def due_date
    @params[:due_date].present? ? @params[:due_date] : Date.today
  end
end

たったこれだけの処理が専用のクラスに切り分けることでかなり読みやすくなりますね。

ここまでやって気になったんですがControllerからService Objectを呼び出しておく部分って冗長になりそうだなとおもったんです。
例えば今回だと before_action で load_task_default_value_service を実行するようにしてますが、これってService Objectの名称が変わるだけで同じ処理をたくさん書くはめになりそうです。

なので ApplicationController で method_missing を使ってService Objectの呼び出しを簡単に出来るようにしてみました。

class ApplicationController
  def method_missing(method_name, *arg)
    if method_name =~ /^load_([a-z_]+)_service$/
      load_service_object($1)
    else
      super
    end
  end

  private
    def load_service_object(service_name)
      service_snakecase = (service_name + '_service')
      service = service_snakecase.camelize.constantize
      instance_variable_set("@#{ service_snakecase }", service.new)
    end
end

こうしておけば UserAuthenticationService を使いたい時は

  before_action :load_user_authentication_service

と書くだけでいいので簡単ですね!

標準
php-logo-a855de85906d6219bb3f642cddf45168
Development

herokuで公式サポートになったPHPを試してみた

herokuでPHPの公式サポートが発表されましたね。

Introducing the new PHP on Heroku

以前からbuild packを使用すればPHPを動かすことは出来ましたが公式となると面倒な手順なしに動くので便利そうな感じです。

Hello Worldしてみる

まずはハロワしてみます
用意するのは以下のものです。

  • index.php
  • composer.json(空でOK)
  • 上記が含まれたgitリポジトリ
$ heroku create
Creating frozen-beach-1321... done, stack is cedar
http://frozen-beach-1321.herokuapp.com/ | git@heroku.com:frozen-beach-1321.git
Git remote heroku added
$ git push heroku master
Initializing repository, done.
Counting objects: 4, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (4/4), 293 bytes | 0 bytes/s, done.
Total 4 (delta 0), reused 0 (delta 0)

-----> PHP app detected

       NOTICE: Your composer.json is completely empty.
       Consider putting at least "{}" in there to make it valid JSON.
       See https://devcenter.heroku.com/categories/php

-----> Setting up runtime environment...
       - PHP 5.5.11
       - Apache 2.4.9
       - Nginx 1.4.6
-----> Installing PHP extensions:
       - opcache (automatic; bundled, using 'ext-opcache.ini')
-----> Building runtime environment...
       NOTICE: No Procfile, defaulting to 'web: vendor/bin/heroku-php-apache2'
-----> Discovering process types
       Procfile declares types -> web

-----> Compressing... done, 60.7MB
-----> Launching... done, v3
       http://frozen-beach-1321.herokuapp.com/ deployed to Heroku

To git@heroku.com:frozen-beach-1321.git
 * [new branch]      master -> master
$ heroku open
Opening frozen-beach-1321... done

簡単すぎる…

しかも日本語もバッチリでした!

composerでライブラリを動かしてみる

composerもかなり便利そうなのは知ってたんですが使ったことなかったのでこの機会に始めてみようと思います。
まずはcomposerのインストールですが、以下のコマンドで良いようです

 curl -sS https://getcomposer.org/installer | php

これで実行したディレクトリに composer.phar がダウンロードされました。
このファイルは gitignore しておいたほうがいいみたいですね。

とりあえず最近のPHPよくわからないしSinatraみたいな軽量フレームワークでもインストールしてみようと検索したら、Silexというのがなんとなく良さげな感じだったのでこれを試してみることにしました。

composer.json

{
  "require": {
    "silex/silex": "2.0.*@dev"
  }
}
$ ./composer.phar install
Loading composer repositories with package information
Installing dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for silex/silex 2.0.*@dev -> satisfiable by silex/silex[2.0.x-dev].
    - silex/silex 2.0.x-dev requires pimple/pimple ~2.1@dev -> no matching package found.

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see  for more details.

Read  for further common problems.

おっとダメでした。なんだろなこれ、とりあえずバージョンを1つ落として再チャレンジしてみます。

composer.json

{
  "require": {
    "silex/silex": "1.2.*@dev"
  }
}
$ ./composer.phar install
Loading composer repositories with package information
Installing dependencies (including require-dev)
  - Installing symfony/routing (v2.4.4)
    Downloading: 100%

  - Installing psr/log (1.0.0)
    Downloading: 100%

  - Installing symfony/debug (v2.4.4)
    Downloading: 100%

  - Installing symfony/http-foundation (v2.4.4)
    Downloading: 100%

  - Installing symfony/event-dispatcher (v2.4.4)
    Downloading: 100%

  - Installing symfony/http-kernel (v2.4.4)
    Downloading: 100%

  - Installing pimple/pimple (v1.1.1)
    Downloading: 100%

  - Installing silex/silex (1.2.x-dev 6d9e3fe)
    Cloning 6d9e3fe4d7d9ed563800ee8b4559bd51c13457e5

symfony/routing suggests installing symfony/config (For using the all-in-one router or any loader)
symfony/routing suggests installing symfony/yaml (For using the YAML loader)
symfony/routing suggests installing symfony/expression-language (For using expression matching)
symfony/routing suggests installing doctrine/annotations (For using the annotation loader)
symfony/event-dispatcher suggests installing symfony/dependency-injection ()
symfony/http-kernel suggests installing symfony/browser-kit ()
symfony/http-kernel suggests installing symfony/class-loader ()
symfony/http-kernel suggests installing symfony/config ()
symfony/http-kernel suggests installing symfony/console ()
symfony/http-kernel suggests installing symfony/dependency-injection ()
symfony/http-kernel suggests installing symfony/finder ()
silex/silex suggests installing symfony/browser-kit (>=2.3,<2.6-dev)
silex/silex suggests installing symfony/css-selector (>=2.3,<2.6-dev)
silex/silex suggests installing symfony/dom-crawler (>=2.3,<2.6-dev)
silex/silex suggests installing symfony/form (>=2.3,<2.6-dev)
Writing lock file
Generating autoload files

今度は成功しました。
composerの出力、bundlerより見やすいし親切だしいいですねこれ。

Silexのコードはこちらを参考に(というか丸パクリ)させていただきました。
PHP - SilexでHello World - Qiita

<?php
require_once __DIR__.'/vendor/autoload.php';

$app = new Silex\Application();

$app->get('/', function() {
    return "Hello World!";
});

$app->get('/hello/{name}', function($name) use($app) {
    return 'Hello '.$app->escape($name);
});

$app->run();

でPHP5.4からのビルトインサーバーを初起動!

php -S 0.0.0.0:8080
PHP 5.4.16 Development Server started at Fri May  2 22:02:16 2014
Listening on http://0.0.0.0:8080
Document root is /Users/kozo/tmp/heroku_php_kozo
Press Ctrl-C to quit.

すげー動いた!っていつもrubyでやってることとそんなに変わらないんだけど、PHPでこれが出来るのは結構感動しますね。

で、Silexでハロワ確認出来たのでこのまま、herokuにプッシュしてみます。

$ git add .
$ git commit -m "Install Silex"
[master 77d66b2] Install Silex
 3 files changed, 523 insertions(+), 2 deletions(-)
 create mode 100644 composer.lock
$ git push heroku master

heroku上ではトップページは動作したんですが、他のルーティングがNot Foundになってしまいました。
これはhtaccessでrewriteすればいいのかな?と思ったので以下の様な内容で作成してコミットしたら動きました!

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
</IfModule>

いやーherokuでこんなにも簡単にPHPが動くともっとPHP使いたくなっちゃいますねー。

標準
title-feature
Design

グッとくる!デザインの参考になるECサイト特集

こんにちは!新人森田です。
新学期ですねーとか言ってたらあっという間にGW突入ってハヤイヨ!
気がづけばブログの更新さぼっておりましたすみません。

そういえば、無謀と思われていた10kmマラソンは無事に完走出来ました!!
皇居ランも毎週恒例イベントになりつつあり、ハレノヒマラソン部けっこうがんばってます。
ついでにシェイプアップも出来たらいいなと走った後にガッツリ食べながら願ってます。

さて、今回はデザインの勉強ということでECサイトをテーマに見ていきたいと思います。
国内外から気になるものを選りすぐって集めてまいりました!
ではいってみましょう。

豊富な情報がまるで雑貨屋さんのように!

扱う情報量が増えるほど、コンテンツの整理が一苦労。
他サイトとの差別化をはかりつつ、どのように商品を見せるかが腕のみせどころです。

Creema

ec-0

http://www.creema.jp/

こちらはハンドメイド作品の購入・販売が出来るサイトです。
トップバッターにして今回紹介する中でダントツの情報量を誇っています。
でもあまりゴチャゴチャして見えないのはメリハリのきいたグリッドのおかげでしょうか。

ec-0b

トップページの下部です。
スクロールすると[注目の作家]、[RANKING]、[SOLD OUT]、[USER VOICE]、[NEW WORKS]と更にコンテンツが続いています。
商品のジャンルもテイストも違うからか、それぞれに目移りしてどれもクリックしたくなっちゃいます。
( ゚д゚)ハッ!これってまさに、街なかで雰囲気に惹かれてフラッと入った雑貨屋さんの感覚

商品を立たせるために装飾は必要最低限ではありますが、その必要最低限の中にも一工夫を感じます。
ただ情報が多いだけでなく検索機能も豊富でユーザビリティの点でもしっかり作ってあります。
これはウッカリ眺め続けてしまう。。

mon cifaka online store

ec-1

http://mon.cifaka.jp/

岡山市にある雑貨屋さんのオンラインストアです。
オンライン先行であっても不思議じゃないほど充実した内容です。
スクリーンショットでお見せできないのがもどかしい、楽しいスクロール&ホバーアクション!
ロゴや商品周りの◯がぷにぷにふよふよします。

ec-1b

ページを読み込むと新着ニュースが降りてきて、一定時間経つと収納されます。
この新着ニュースと買い物カゴの部分だけ立体的に作ってあって、他と差別化されているなぁと思いきや、ページトップに固定されてスクロールしてもついてくるんです。
なるほど、これならコンテンツに埋もれずに目がいくなあ。
半フラットっていうべきなのか、リッチとフラットをいいとこ取りで使い分けてますね。

プロダクトを魅せるミニマルデザイン!

ECサイトの主役は何と言っても商品です。
実際に触れられないからこそデザインが必要です。
じゃあどんな風に見えたら商品をカゴに入れてもらえるんでしょうか。

sample

ec-2

http://ec-sample.shop-pro.jp/

ちょっとした環境や地域活動をベースに商品を製作販売しているサイトです。
その精神を反映しているみたいに、実直な、整った印象を受けます。
必要以上に文字を出しすぎず、言葉とモノの情報バランスがちょうどいい感じ

ec-2b

商品詳細はこのようなデザインです。
丁寧に撮られた商品写真が、手にとって見るように商品の魅力を物語っています。
そしてテキストが控えめに、けれど的確に情報を提供してくれます。
すごく心地の良い買い物体験が出来そう…これがUXってやつ?!

MAKR

ec-3

http://makr.com/

こちらは先ほどのサイトよりも更にテキスト要素を排除してプロダクト一本で勝負しているサイト。
もちろん必要な箇所にはテキストがありますが、この潔さはすごい。
国内ではこういうサイトはあまりないような気がします。

ec-3b

商品詳細においても徹底されてます。
スクロールすると、それだけで絵になる商品写真がたっぷりとスペースを使って並べられています。
海外のECサイトデザインの◯個のポイントみたいな記事を読んだ時に、「ナビゲーションに言葉を使い過ぎない」的なことが書いてあった気がしますが、それの極みっていうか。
巧みな言い回しじゃなく商品そのものに目がいくし、販売する側も商品そのもので勝負してる所が好感にも繋がりそうです。

canopy

ec-4

http://canopy.co/

はい、出ました。フラットとしか言いようがない完全なるフラットなフラットサイト。
アマゾンの商品をピックアップしてキュレートしているサイトのようです。
この流行突っ走ってます感がたまらなくたまらないです。

ec-4b

カテゴリー別や、商品のテイスト別でソートして商品を見ることも出来ます。
詳細画面もオールフラットでいちいちカッコいいです。
ナビゲーションも洗練されてるし、ばっちりレスポンシブだし、作りたかったものがそこにある感じでなんかくやしい!

まとめ

今やECサイトなんて山ほどありますが、ピックアップしてみた5つのサイトはどこか似た所があるように思います。
そもそもサイトのトーンがホワイト〜グレー基調なのが大きいのかもしれません。
色味は扱っている商品に任せてナビゲーションはミニマルに、ということなのでしょう。
そのような共通したテーマの元でも、表現の仕方は様々でした。

また、紹介した順序はテキスト情報の多さ順だったりもします。
日本のサイトはそういう風潮なのかテキスト要素がかなり多いように感じます。
それは悪いことではありませんが、後半の2サイトから学ぶ部分も大いにあると思います。
リッチデザインとフラットデザイン、テキストとプロダクト、ユーザビリティとミニマルナビゲーション。
バランスが大事だなぁと思いつつ、かっこいいカタカナ並べたかっただけです。

あと、あまり触れませんでしたが、それらが最終的に購入に結びつかなければならないわけで。
うーむ奥が深いです。

若干迷宮入りし始めたので今回はこの辺で。
最近コーディングを頑張ってるので、その中で気づいたことなども書いていけたらなと思ってます!押忍!

標準