カテゴリー: デザイン

デザイナーもそろそろVimっていいんじゃない?

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

個人的に特に便利だと思うのが、設定です!
設定は「vimrc」というファイルを作成して、その中に記述するのですが、一度設定ができてしまえば、どんな環境でも「vimrc」ファイルを作成して、内容をコピペするだけ!
これだけでいつもと同じ使い勝手を再現できます。

 

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

 

cd ディレクトリの移動
ls ディレクトリ内のファイル一覧
pwd 現在のディレクトリのパスを表示
mkdir フォルダーの作成
~ ホームディレクトリに移動

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

 

Vimの起動方法

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

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

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

 

Vimの3つのモード

 

 Normal Mode  コマンド入力モード
 Insert Mode  テキスト入力モード
 Visual Mode  テキスト選択モード

 

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

 

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

 

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

 

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

 

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

 

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

 

 h  カーソルを左に移動
 j  カーソルを下に移動
 k  カーソルを上に移動
 l  カーソルを右に移動

 

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

 

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

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

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

 

Vimのコマンドのおさらい

 

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

 i  カーソルの場所でInsert Modeに切り替え
 a カーソルの場所から1文字後ろでInsert Modeに切り替え
 x  カーソルの場所の文字を削除
 v  Visual Mode(範囲選択モード)に切り替え
 V  Visual Modeに切り替え、行単位で範囲作成
 :w  ファイルの保存
 :q  ファイルの終了(ファイルを閉じる)
 :q!  ファイルの強制終了(保存せずにファイルを閉じる)

 

他に良く使うコマンド

y  コピー
yy  1行コピー
dd  1行削除
p  ペースト
u  アンドゥ(操作を1つ戻す)
r  リドゥ(操作を1つ進める)
gg  ページの先頭に移動
G  ページの最後尾に移動
ctrl + u  ページを上にスクロールする
ctrl + d  ページを下にスクロールする
/hoge  文字列検索(「/」を入力後文字列を入力)
/hoge の後に n  文字列検索後、次の候補に移動
/hoge の後に N  文字列検索後、前の候補に移動

 

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

 

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

 

詳しく紹介されている記事は豊富にあるので、一度見てもらえればより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年に廃止になりました。

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

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

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

 

 

 

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

 

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

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

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

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

 

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

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

 

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

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

 

 

 

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

 

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

 

 

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

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

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

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

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

 

 

 

まとめ

 

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

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

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

 

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

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

 

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

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


Adobe Lightroom mobileを使って写真を撮って編集してみた!

デザイナーのKです。
気温も暖かくなってきて、過ごしやすい季節になりましたね。
ぼくは写真を撮るのが趣味なので、外出時にはよく写真撮影をしています。
そこで今回は、Adobeから出ている写真編集アプリ「Adobe Lightroom mobile」をご紹介しようと思います。
ちなみに機種はiPhone7を利用しています。

■ Adobe Lightroom mobileとは

Adobeが提供している写真編集アプリです。

写真編集ソフトとして有名なPhotoshopのテクノロジーを利用して、スマートフォンで気軽に高機能な写真編集ができます。

Lightroom mobile(以下Lightroom)を利用して写真を撮影するだけで、iPhoneにデフォルトで入っているカメラアプリよりも高画質な写真を撮影することが可能になります。

またRAW画像なども扱うことができるので、より詳細な画像補正ができ、プロ並みの写真編集をすることができるのが特徴です。
ぼくが最近iPhoneで写真撮影する際は、もっぱらLightroomを使用しています!

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

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

■ さっそく撮影してみる

記事公開のタイミング的に少しずれましたが、今回は会社で開催された花見に行った際に、桜の花を撮影してみました。
花見シーズン真っ只中だったので、満開の桜を撮影することができました。日本の桜最高!
それでは撮影方法です。
操作はいたって簡単。通常のカメラアプリとほとんど変わりありません。

まず、Lightroomを起動します。

01

起動した最初の画面はこんな感じです。まだ写真を撮ってないので何も表示されていません。右下のカメラアイコンをタップしてカメラモードに切り替えます。

撮影モードの画面がこちら↓

02

 カメラモードでのポイントは、左下にある撮影モードを「HDR」に変更しておくことです。

HDRとは…

「ハイダイナミックレンジ合成(ハイダイナミックレンジごうせい、英語:high dynamic range imaging、略称:HDRI、HDR)、とは、通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。」(Wikipediaより引用)

ちょっと横文字ばかりでわかりにくいですよね…

 

ものすごく簡単に言えば、
「明るさや暗さなどのバランスをいい感じにしたものを、カメラ内部で自動で作ってくれる便利な機能」
のことです(ざっくり過ぎて怒られそう)。

 

撮影の手順ですが、撮影したい対象を通常のカメラ操作と同じように撮影するだけです。

今回はその他の設定などは特に触らずに進めていきたいと思います。

■ 撮影した写真を編集(加工)する

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

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

 

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

 

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

 

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

03

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

 

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

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

04

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

 

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

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

05

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

 

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

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

06

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

 

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

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

07

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

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

08

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

 

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

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

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

 

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

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

10

 

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

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

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

11

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

 

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

12

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

13

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

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

 

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

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


【OIWAI Marche】フライヤーできちゃいました

こんにちわ。リエです。
 
先日コーポレートブログで、弊社で開催するイベントを告知させていただきましたが、イベント開催までの数日、イベントに関することをブログで書いていこうかと思います!
 
まず第一弾は、フライヤーについて。
イベント開催につき弊社デザイナーにフライヤーを作成してもらいました。
イベントのコンセプトが「ちょっとしたプレゼント」なので、それに合うデザインになりました。
完成したフライヤーを見て感動!
すごいカワイイ!!
参加いただく店舗様やお配りした皆さまにもとっても好評なフライヤーです^^
(社内のデザイナーだから誉めてるワケではない)
 
また今回印刷をお願いしたのは、レトロ印刷さんという、印刷屋さん。
以前、ワークショップへお伺いしました。
レトロ印刷さんの印刷は、オフセット印刷等とは原理が違い、シルクスクリーンに近い孔版印刷となります。
孔版印刷は、インクの色ムラ、カスれがなどが起こりますが、印刷の風合いがレトロ感ある雰囲気のある印刷物になります。
それがとても味がありいい意味で個性のある印刷物が仕上がります。
 
IMG_5084
 
IMG_5085
 
もし目にする機会がございましたら、ぜひお手にとっていただけますと嬉しいです(*’ω’*)
 
 
\\イベント情報!!//
11月19日(土)にちょっとしたプレゼントをコンセプトに、大阪江戸堀にある弊社オフィスでマルシェを開催しちゃいます\(^o^)/
https://oiwaimarche.com/
出店いただくお店は、本屋・花屋・お菓子屋・イラストレーターなど多種多彩!
厳選した商品の販売はもちろん、ワークショップや店舗スタンプラリーなど内容盛りだくさんで開催します。
興味がある方は、ぜひお越しくださいませ^^
OIWAI Marche公式Facebookアカウント
OIWAI Marche公式Twitterアカウント