カテゴリー: デザイン

こんにちわ。デザイナーのヒロシです。

「Vim」というエディターをご存知でしょうか？
エンジニアさんがよく使ってる印象がある「高機能」「爆速」で有名なエディターです。
ただ使い方が独特で慣れるまでに時間がかかることで有名です。

私も元々はSublime Txt等のエディターを使っていたのですが、GUIが利用できない場面が増えてきてVimに手を出し始めました。

Vimはターミナル上で起動するエディターなので、一度覚えてしまえばgitの更新やリモートファイルへのアップロード、リモートサーバへのアクセス〜編集まで、ターミナル上でそのまま作業を続けることができます。

要するに作業環境はターミナルだけで良くなるわけです。

私もVimにある程度慣れてきたらすごい快適に感じるようになりました。

最近ではVagrantなどの仮想環境内での作業、gulpやSassのインストールなどでデザイナーでもターミナルを利用する機会が多くなってきました。
これを機にvimに乗り換えてみてもいいんじゃないでしょうか。

ということで本記事では、Vimの良さと利用方法を少しばかり語りたいなぁと思います。

Vimを使うメリットとデメリット

メリット
・リファレンスが膨大（ググればすぐに記事が見つかります）
・プラグインが豊富なので、自分好みにカスタマイズできる
・設定は使い回しできるので、どんな環境でもすぐに再現できる
（新しいサーバ環境でもエンジニアさんが大概Vim入れてます）
・UNIX（LINUX）コマンドにも慣れることができる

デメリット
・操作になれるまでに1ヶ月ぐらいは見ておいた方が良い
・CUI環境での利用を前提としたエディターなので、キーボードのみで操作するためマウスで広範囲のコピペなどができない
・設定やプラグインのインストールの作法に若干慣れが必要

まずはUNIXコマンドのおさらい

最低限これぐらいで問題ないかなと思います。

Vimの起動方法

macだと初めからVimがインストールされているので、デスクトップにHTMLを作成するなら

cd ~/DeskTop/でディレクトリを移動して

vim hoge.html
これだけでOK。
homebrewで管理したい方はこちらを参考にするといいかも。
http://qiita.com/one-a/items/5039dd266b90e18a4242

Vimの3つのモード

Vimで一番戸惑うのは、この3つのモードの存在ですかね。
起動するとまずは「Normal Mode」で始まります。

この状態では、テキストの編集はできません。
できることは「カーソルの移動」「テキストのコピペ」「他モードへの移行」「検索」「保存／終了」などを行います。
テキストを編集したら常にこのモードに戻ります。

次に「Insert Mode」。「Normal Mode」でカーソルを移動し、「a」または「i」キーでテキストを編集することができます。
編集が終了したら「ESC」または「ctrl + [」などで解除できます。

最後に「Visual Mode」。こちらはテキストを選択するモードになります。
単語単位ぐらいであればマウスで選択範囲を作ってコピーできますが、一行コピーや範囲選択などで利用します。
（※マウスで範囲選択をすると行番号や不可視文字など不必要なテキストも含まれてしまいます）

使い方は「Normal Mode」でカーソルを移動し、「v」キーを押下します。あとはカーソルを移動すれば選択範囲が広がります。また「V」キー（shift + v）なら行単位で範囲が広がります。

戸惑うのはカーソルの動かし方

こちらに慣れた方が打ち込むスピードは速くなると思いますが、私は十字キーを使ってます(*´Д`)
ぶっちゃけ十字キーでも問題ないようにも思ったり。。好きに使っていいんじゃないでしょうかw

最後に、保存と画面の終了の仕方を

「Normal Mode」で「:」を押下すると、画面最下段にコマンドが表示されます。
この状態で「w」キーで保存。「q」で終了。「q!」で強制終了です。
同時に使うこともできます。「wq」なら保存して終了になります。簡単ですね！

最低限これぐらいを理解すれば、そこまで戸惑うことなくvimを操作できるかなと思います。

Vimのコマンドのおさらい

※コマンドはNormal Modeで使います

他に良く使うコマンド

注意する点は、コピー／ペースト、アンドゥ／リドゥぐらいでしょうか。

始めは何もしないと行番号がなかったり、バックスペースが効かなかったりするので、また次の機会に設定について詳しくご紹介できればと思います。

詳しく紹介されている記事は豊富にあるので、一度見てもらえればよりVimのことが理解できると思います。
http://qiita.com/JpnLavender/items/fabcc79b4ab0d52e1f6d

エディターは使い慣れたものが一番だとは思いますが、Vimという選択肢も悪くないですよ♪

こんにちは。デザイナーの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の紹介記事のようになってしまいましたが、弊社では…

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