制作実績のご紹介・ポップコーンパパ

こんにちは。デザイナーのKです。
今回は弊社が担当した案件のご紹介をしたいと思います。
大阪にあるポップコーン専門店「ポップコーンパパ」を運営しているDreams様のオフィシャルサイトと、「ポップコーンパパ」のオンラインショップのリニューアルを担当いたしました。

 

ポップコーンパパ オフィシャルサイト
https://popcorn-papa.com/

ポップコーンパパ オンラインショップ
http://www.popcornpapa.jp/

「ポップコーンパパ」について

「ポップコーンパパ」は、大阪でポップコーンを販売しているポップコーン専門店です。
USJの近くにある「UCW店」、海遊館近くの「天保山店」、玉造にある「玉造店」の3つの店舗で営業されています。
「キャラメルナッツ」などの定番の味から、「うめかつお」や「明太子マヨネーズ」などの少し変わった味のフレーバーが32種類もあり、小さいお子様から大人の方まで様々な方に大人気のポップコーン屋さんです。
また、かわいいキャラクターも印象的で、USJなどに行かれた方は一度は目にしたことがあるのではないでしょうか。

オフィシャルサイトのリニューアル

1.サイトデザインを全面的にリニューアル!

オフィシャルサイトをリニューアル

ポップコーンパパ」のコーポレートカラーである赤色をメインに、全てのページのデザインを新しくしました。情報整理をイチから見直し、ユーザーが求める情報を効率的に閲覧できるようにサイト設計をしました。
また、「ポップコーンパパ」のキャラクターを随所に使用し、可愛らしくポップなデザイントーンに仕上げました。細かい部分で言うと、ヘッダー部分でポップコーンがはじけるようなアニメーションをつけたり、こだわりページでキャラクターがユラユラする動きをさせたりすることで、ポップで遊び心のあるサイトに仕上げました。

2.ポップコーンの魅力をもっと伝えるために!

メインビジュアルの撮影風景
新しいメインビジュアルの撮影風景ポップコーンパパについて
新しくなった「ポップコーンパパ」のメインビジュアル

 

「ポップコーンパパ」の魅力をさらに引き出すために、こだわりページのメインビジュアルの撮影を新規で行い、今までになかった新たなビジュアルを作り上げました。
「はじけるほど、笑おう。」コンセプトに合った写真を使うことによって、さらに親しみやすく、食べてみたくなるようなビジュアルに仕上げることができました。

3.いつでもどこでも閲覧できるサイトに!

レスポンシブに対応

レスポンシブデザインを採用し、PCやスマートフォン、タブレットなどでの閲覧に対応しました。必要となる情報は省略せずに、どんな環境からでもシームレスに閲覧できるようにしました。

4.読んで楽しめるコンテンツがいっぱい!

さまざまなコンテンツがあります

新作のポップコーンやキャンペーン情報は「トピックス」、チャリティ活動やキャンペーン活動は「スマイル活動」、イベント情報やスタッフによるテーマパーク日記などは「ポップコーンパパマガジン」の大きく分けて3つのコンテンツがあります。ボリューム満点で読み応えのあるコンテンツが、今後も増えていく予定です。

 

オンラインショップのリニューアル

1.商品をもっと見やすくリニューアル!

オンラインショップのイメージ

ヘッダーをシンプルなデザインに変更し、商品を以前のサイトよりさらに見やすいレイアウトにしました。表示する商品数も増やし、たくさんのポップコーンをファーストビューでチェックできるようになりました。
また、商品のランキング数も増やして人気なポップコーンが一目で分かるように配慮しました。

2.商品購入への導線を改善!

商品詳細ページ

商品購入ページでは、ファーストビューで商品購入ボタンが見えるようにレイアウトを変更して、商品を購入しやすいようなUIに調整しました。
また、「最近チェックした商品」を新しく追加し、ユーザーにとって使いやすい導線になるようにサイトを設計し直しました。

3.お買い物ガイドでさらに使いやすく!

お買い物ガイド画面

今回のリニューアルで新たに「お買い物ガイド」をページ下部に設置しました。「お買い物ガイド」を設置したことにより、いつでも送料や配送についてなど、ユーザーが知りたい情報にアクセスできるようになり、さらに使いやすいサイトになりました。

 

さいごに

今回のリニューアルにより、今まで以上に見やすく、使いやすいサイトに変わりましたので、是非アクセスしてみてもらえると嬉しいです。
そして「ポップコーンパパ」のポップコーンを是非一度ご賞味頂ければと思います。(個人的には「梅かつお」と「クリームソーダ*期間限定」がオススメ!)

「RubyWorld Conference 2017」に協賛させていただきます

「RubyWorld Conference 2017」に、Goldスポンサーとして協賛させていただきます。

<期間>
2017年11月1日(水)、2日(木)
<会場>
島根県立産業交流会館「くにびきメッセ」3階 国際会議場
<主催>
RubyWorld Conference開催実行委員会
「RubyWorld Conference 2017」公式サイト

Windows StoreにUbuntuが並ぶ日

Microsoft より Windows 全開発者待望かもしれないアナウンスがありました。

 

ついに、Windows Store に Ubuntu が。

Today, we’re excited to announce that Canonical’s Ubuntu Linux Distro is now available in the Windows Store and can be downloaded and installed on any Windows Insider build >= #16215!

 

全文は以下に。

https://blogs.msdn.microsoft.com/commandline/2017/07/10/ubuntu-now-available-from-the-windows-store/

 

ubuntu
Storeに燦然と輝くオレンジ

 

Ubuntuとは

Debian GNU/Linuxをベースとしたオペレーティングシステム (OS) である。

https://ja.wikipedia.org/wiki/Ubuntu

 

インストールのためのシステム必要条件は Windows 10 Version 16190.0 以降。

 

Microsoft Developer のブログでは Windows Insider build >= #16215 と記載されていて若干buildの数字が違うようですが、そういうこともあるでしょう

 

使用中の Windows の OS のビルドを確認したところ 15063だったので、早速、 Windows Update してみようとしたのですが、「お使いのWindowsは最新です」??

 

よくよく見てみると、現在のところは Windows Insider Program に参加しているユーザー限定のようです。

安定ビルドではインストールできません。残念。

 

開始するを押せばルビコン川を渡れます。

 

悩みに悩みましたが、現在、予備PCがないので Insider Preview build は断念しました。

 

Store のレビューを覗いたところ、起動に成功した人と上手くいっていない人とがいるようです。

まだ一般向けほどには安定していないので仕方ありません。

 

Note: Because Windows Insider builds are essentially weekly snapshots of the next version of Windows 10 as it’s being built, this feature will eventually become available to anyone who runs Windows 10 Fall Creators Update or later.

Windows 10 Fall Creators Update 以降に全てのユーザーが利用できるかも?とのことなので、それまで期待して待ちたいと思います。

 

Windows で Ubuntu が実行できればいろいろと捗ることでしょう。

 

まともに動くのかどうかはまた別のお話。

 

ところで、

Microsoft の記事を見た時点では、私用PCの OS はまだ Windows 7 でした。

Ubuntu が Store に来たのに試用すらできない深い悲しみの中、Microsoft のアップデードツールをダウンロードしてみたら何事もなくアップデートが始まってしまいました。

今では私用PCも Windows 10。

こんな素晴らしいキャンディ (OS) をもらえる私はきっと特別な存在なのだと感じました。

Ubuntu は試せていませんが。

 

ライセンスがどこかで有効になっていたのでしょうか。

Windows 10 無償アップデートの頃にダイアログがしつこいくらい何度も表示されて、そのたび拒否していたように思いますが、うっかり承諾を押していたのかもしれません。

 

業務用PCが 10 になったときよりスムーズかつ短時間で完了したような気がします。

デスクトップが起動してからいろいろアップデートも勝手にやってくれました。

 

最近の Microsoft はいいですね。いいと思います。

次の Update が楽しみです。

肉球が何でできてるかを調べてみた

こんにちわ。
リエです。
 
毎日暑いですね。もうすっかり夏です。
夏といえばカルピス。(わたしはですが)
原液とアイスはこの時期絶対に冷蔵庫と冷凍庫にスタンバっています。
 
この前、あるモノの取り扱い説明書が見たくなりました。
お家に保管しているのですが、出すのがちょっとめんどうだったのでググることに。
製品の型番がわからなかったので、キーワード検索でググり型番ゲット。
そうして無事に取り扱い説明書を見ることができました。
 
というように普段の生活でググるという場面は多々あります。
特に仕事柄調べ物をすることが多く、日々お世話になっております。
最近はTwitter検索される方が多いかもしれませんね。
 
最初の頃は、うまく検索ができず自分がほしい情報を得られないことが多かったのですが、弊社にはググりのプロ達が沢山いるのでポイントを教えてもらいながら日々ググりの腕を鍛えています。
 
ポイントなんて知ってるぜ!という方が多いかもしれませんが、ポイントとしては適切な「キーワード」を組み合わせることでしょうか。
AND検索と言われる方法で、検索で最もよく利用されている検索法となります。
 
長過ぎるキーワード(ほぼ文章)では思うような結果はなかなか出てくれません。
(これ昔のわたしはよくやっていました;)
 
最近わんこの肉球は何でできているのか、知りたくてググったのですが、その時は「犬」「肉球」「何でできている」を検索ワードとして無事情報をゲットしました。
#わんこの肉球は皮下脂肪でできているとのこと
#わんこが大好き
#肉球のプニプニたまらん
#ずっと触っていられる
#肉球は幸せでできている
#あれ?何を書きたかったんだ?
 

 
 
このブログ書いて公開忘れてたシリーズ\(^o^)/

デザインする時に一瞬思い出して欲しい、色のユニバーサルデザイン

こんにちは。新卒デザイナーのはなです。

社会人になってもう三ヶ月以上経ちますが相変わらず朝は眠いです。

 

 

ところでみなさん小学生の時は視力検査と一緒に色覚の検査は行われていましたか?

これは色が正常に見えているかどうかを検査するものですが、日本では2003年に廃止になりました。

小学4年生を対象に行われていたそうです。

私は2003年に小4になったので色覚検査未受診の第一号になります。

(最近になって、希望者は色覚検査の受診ができるようになったそうです)

 

 

 

色覚異常者はどれぐらいいるの?

 

色覚”異常”と聞くと、何百人に一人とか、何千人に一人とかそういうイメージを持ってしまいがちですが、日本人の男性の場合20人に一人、女性で500人に一人が色覚異常を持っていると言われています。

色覚異常の中で特に多い赤緑色覚の異常に関する遺伝子がX遺伝子に乗っているため、女性は異常のある遺伝子を持っていても発現しにくく、男性は異常のある遺伝子を持っていると必ず発現します。

(X遺伝子って何?という方は生物の教科書を読んでください)

男女で大きく色覚異常者の数が異なるのはこのためです。

 

それにしても20人に一人って結構な確率ですよね。

1クラスに男子が20人在籍していれば一人は色覚異常者がいることになりますね。

 

これだけの高い割合の色覚異常者がいるにもかかわらず、案外忘れがちになってしまうのが色のユニバーサルデザインのことです。

その制作物は色という観点に置いて誰が見てもわかりやすいものになっているでしょうか?

 

 

 

具体的にどういった配慮が必要なの?

 

色覚異常にも様々な種類がありますが、ここでは主に一番数が多いと言われている赤緑色覚異常を例にとってお話しします。

 

赤緑色覚異常とは、その名の通り赤色緑色を感受する視物質に異常が発生している状態です。

赤色と緑色の区別がつきにくく、どちらの色も茶色やグレーっぽく見えるそうです。

また、オレンジと黄緑、青と紫、黄緑と黄色なども見分けにくいと言われています。

 

とはいえ、日常生活を送ることにおいてはほとんど支障はなく、一部の職を除き業務に大きく支障が出ることはありません。

 

ですが、もし以下のような機械が仕事場に導入された場合はどうなるのでしょうか?

 

「ランプの光がからに変わったら、赤いボタンを押してください」

どのボタンを押せばいいんや?

 

この機械のシステムだと、ボタンを押すタイミングと、どのボタンを押すかということを色のみで知覚し、判断しなくてはいけません。

色覚健常者であればなんの問題もありませんが、赤緑色覚異常の人にとっては困ったことになってしまいます。

 

 

もし以下のような配慮がされていたらどうでしょうか。

「ランプがに変わりGOと出たらRという赤いボタンを押してください」

色彩異常の人でも機械を使うことができますね。解決!

最初の機械と違い、色のみで判断しなければならない状況を避けました。

色覚健常者にとっても、よりわかりやすくなったと思います。

 

 

 

まとめ

 

赤緑色覚異常を例にとって紹介しましたが、基本的に色のユニバーサルデザイン全般において気をつけなければならないことはとてもシンプルです。

・二つの色を並べて配置する際は明度差を大きくつける、もしくは白や黒を挟んでセパレートする

・色のみで何かを判断しなければならないという状況を極力避ける

 

以上の配慮は、色覚異常者だけではなくお年寄りや子供、そして色覚健常者にとっても、よりわかりやすいデザインを作るために大切なことです。

物を作る時、一瞬でもいいので色のユニバーサルデザインのことを思い出して、今作っているものは大丈夫かな?と振り返ってみてください。

 

あと視物質と色覚の話は掘り下げていくと奥が深くて面白いです!

もし興味がある方はググってみてくださいね〜!