カテゴリー: デザイン

こんにちは。デザイナーの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．お買い物ガイドでさらに使いやすく！

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

 

さいごに

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

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

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

 

 

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

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

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

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

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

 

 

 

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

 

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

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

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

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

 

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

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

 

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

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

 

 

 

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

 

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

 

 

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

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

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

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

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

 

 

 

まとめ

 

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

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

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

 

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

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

 

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

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

■ まずはLightroomをインストール

App Storeから通常の手順で「Lightroom」と検索して、アプリをインストールします。

■ さっそく撮影してみる

■ 撮影した写真を編集（加工）する

「HDRで撮影したならそれだけで綺麗な写真になったんじゃないの？」
と思われるかもしれませんが、それだけで終わらないのがLightroomのすごいところです。

HDR撮影自体は、iPhoneのデフォルトのカメラアプリにも機能としては付いているのですが、LightroomではHDRで撮影して、さらに細かい画像編集（加工）をすることができます。

 

また今回の記事ではLightroomの全ての機能は説明しません（機能が多いので…）。
細かい機能説明など興味を持たれた方はググってみることをおすすめします。

 

それでは、撮影した桜の写真を編集してみましょう。
ざっくり自己流ではありますが、撮影した画像をさらにきれいにする編集をしていきたいと思います。

 

1 画像一覧から撮影した画像を選択する

この画面にLightroomで撮影した写真がアップされていきます。
写真の編集や削除もこの画面から行います。

 

2 編集ツールを使用して、画像を加工していく

写真をタップすると、編集画面に移動します。

画面下部ズラッと並んでいるのが編集ツールになります。
このツールを使用して写真を編集していきます。

 

2-1 「プリセット」を利用して全体の明るさやノイズなどを調整する

編集メニューの「プリセット」をタップすると、写真全体のトーンなどを一括である程度修正できます。

今回は撮影した写真は若干ノイズが入っていた印象があったので、
「プリセット」→「ディテール」→「ノイズ軽減(高)」を選択して調整しました。
これで写真全体のノイズを自動で調節され、写真が少し柔らかな印象になりました。
ちなみにこのプリセットは他にも沢山の種類があるので、色々試してみるのも面白いです。

 

2-2 「ライト」で明るさを調整する

次に、編集メニューの「ライト」で写真の明るさなどを調整していきます。

写真全体が暗かったので、「露光量」や「白レベル」「黒レベル」などのバーを操作して、メリハリのある印象に調整します。
この写真の調整ポイントは、
『白いところは白く、黒いところは黒く』です！
桜の花が主役なので、白部分は「白レベル」高め、
黒部分（木の幹の部分）は「黒レベル」高めにしてメリハリを出しています。

 

2-3 「カラー」で色調を調整

次に、編集メニューの「カラー」で写真の色調を調整していきます。

写真の色調は、その写真の印象を決める部分でもっとも重要な部分の一つなので、
自分の好みの色合いになるまで粘り強く調整してみたほうがいいと思います。

「色温度」を操作すると、写真全体の色調の印象がガラッと変化するので色々試してみると面白いです。
今回は桜ということで、「ピンク」のイメージが強かったので上記の画像の数値で調整して、全体的にピンク色メインの色調にしてみました。

こちらが比較画像ですが、一目瞭然で調整後の方が桜の雰囲気が増したと思いませんか？
このようにLightroomでは、簡単に写真の編集ができてしまうのです。

 

2-4 「効果」で細かい調整をする

次に、編集メニューの「効果」で写真の細かいディテールを調整していきます。

・「明瞭度」→ 写真をくっきりさせる
・「かすみの除去」→ 霧がかった写真などのかすみを取る（逆にボワッとした印象にしたいときに使うこともできる）
・「周辺光量補正」→ 写真周辺の光の量を調整する（マイナスにするとトイカメラ風に！）

 

2-5 「レンズ」でゆがみを補正する

「レンズ」の項目で「レンズ補正を使用」をオンにしておいてもよいかもしれません。
iPhoneのレンズはズーム無しで撮影すると少し歪曲する傾向があるので、それを補完するための機能になります。

 

3 写真をカメラロール保存する

これで編集は完了したので、iPhoneのカメラロールに写真を保存します。

方法は簡単で、画面右上の上矢印（画像の赤丸部分）をタップすると、「カメラロールに保存」という項目が出てきます。
そちらをタップして、「小サイズ」または「使用可能な最大サイズ」を選択するとカメラロールに保存されます。

これでLightroomによる写真編集は終わりです！

 

最終的に出来上がった写真はこちらになります。

編集前との比較画像はこちら。

編集前と比べると印象がかなり変わったのがお分かりいただけるでしょうか。
ぼく自身、まだまだ編集やレタッチなどの技術が未熟なのですが、スマホだけでもここまでの編集ができるようになった今の時代に感謝です。

さすがに一眼レフなどの画質などには到底及びませんが、
気軽にスマホできれいな写真を撮影したいときなどにLightroomはうってつけのアプリなので、機会があれば試してみるのはいかがでしょうか。

 

と、完全にLightroomの紹介記事のようになってしまいましたが、弊社では…

＼＼写真撮影や編集が好きな（もちろんデザインも）デザイナーさんを大募集中です！／／
会社見学なども随時受け付けているので、お気軽にお問い合わせください^^

弊社が担当した案件の「UNIM」様のロゴとコーポレートサイトのご紹介をしたいと思います。

まず、ユニエム様のロゴを制作するに辺り、ヒアリングを行い、
「世の中の様々なミスマッチを解決したい」、「新しい仕組みづくりに挑戦したい」といった強い思いに触れることができました。

その中で、次のビジョンが浮かび上がってきました。

 

人それぞれに最適なマッチングの仕組みを創造し、
人と人、人と企業、人とモノ、人と場所、
様々なつながりを円滑にする

 

そのビジョンを踏まえてロゴデザインを 3 案作成し、
こちらのロゴを採用していただきました。

 

 

こちらのロゴは、ビジョンを体現する「芯」の強さ、採用に関する事業も扱うため、柔和な印象も感じられるようデザインしました。
インパクトや躍動感よりも、「仕組み＝システム」を創り上げるためのインテリジェンスや落ち着いたイメージを重視しています。

「M」のカタチをユニークにし、人と人が手を取り合い「つながる」ことをイメージ出来るようにしました。そして、「M」を構成する線のエレメントが前後に重なって見えることで多面的に物事を捉えることを表現しています。

 

 

コーポレートサイトは、ヒアリングの時に浮かび上がったビジョン「人と人、人と企業、人とモノ、人と場所」の「つながり」をコンセプトに制作をいたしました。

 

https://unim.co.jp/

ヘッダーのメインビジュアルは、「つながりを創る」ということがイメージ出来るように作成いたしました。たくさんある「点」をつなげることで、それを表現しています。

株式会社として、設立されて間もないですが、それ以前にも、ご活躍されていることをお聞きしましたので、それが伝わる様に、全体的にはフォーマルで、信頼出来るサイトになるように心がけて制作いたしました。

 

 

– – – – – – – – – –
スプラウト株式会社は、大規模なウェブサービスのシステム開発に携わってきたノウハウを活かし、ウェブ上の様々なコミュニケーションのしくみをご提供・ご提案しています。
お気軽にお問い合わせください！

＼＼一緒に成長できる仲間も募集中です！！／／
あなたのしたいことを、私たちと。
あなたの実現してみたいアイデアや技術を私たちに教えてください。
コミュニケーションのあたらしいカタチを私たちと一緒に考えませんか？
募集要項はこちらから。