カテゴリー: デザイン

CSS Grid Layout を使ってみよう!(基本編)


 
webページでレイアウトをするとき、今まではfloat、最近では、Frexboxを使ったりしているかと思いますが、「CSS Grid Layout」も今後導入を考えてもいいかもしれません。
まずは、簡単に3×3のマスを作ってみましょう!
 
.grid-containerにグリッドの要素を内包する要素として
「display: grid;」を記述します。

item1
item2
item3
item4
item5
item6
item7
item8
item9
.grid-container{
  display: grid;
  height: 300px;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

このままだと、divタグが並んでるだけなので、.grid-itemにそれぞれ位置を追記します。

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.item6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.item7 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.item8 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.item9 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

これで、要素が3x3に並んだと思います。

CSSが長くなりましたが、内容はほとんど共通でシンプルです。
「.grid-item」に指定してある、
grid-columnは横の開始点と終了点、
grid-rowは縦の開始点と終了点を指定しています。


ちなみに分割する線のことを「グリッドライン(grid line)」と呼んでいます。

アイテム間に余白を入れるgrid-gap

アイテム間に余白を入れたい場合があると思います。
その場合、親要素「.grid-container」に「grid-gap」を追記しましょう。

.grid-container{
  display: grid;
  grid-gap: 5px;
}

アイテム間に5pxの余白が出来たと思います。

共通のアイテムの幅と高さの指定

ここまでで、「item1」〜「item9」まで個々にアイテムの幅と高さを指定していましたが、共通の幅と高さである場合「grid-template-columns」「grid-template-rows」で省略できます。
grid-template-columnsで横幅の指定、grid-template-rowsで縦幅の指定ができます。

次のように書くと、「横幅が150px 100px 50px」「縦幅は150px 100px 50px」の縦横共通のアイテムができます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;
  grid-template-columns: 150px 100px 50px;
  grid-template-rows: 150px 100px 50px;
}

「fr」という値について

さらに「1fr」「2fr」などの様に指定すると残りの長さを分割出来ます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}

個別のアイテムの大きさの変更

これらを応用すれば下記のようなレイアウトが出来ます。
(item4,item5の大きさを変更しています。)

item1
item2
item3
item4
item5
item6
item7
.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

/*「grid-template-columns」「grid-template-rows」で指定した以外の大きさのレイアウト*/
.item4 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

グリッドラインに名前

ちなみにグリッドラインに名前をつけることができます。
最初や最後、キーポイントとなるグリッドに名前を付けることで管理がしやすくなるかと思います。

.grid-container{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: [c1] 150px [c2] 1fr [c3] 2fr [c4];
  grid-template-rows: [r1] 150px [r2] 1fr [r3] 2fr [r4];
}
.item1 {
  grid-column: c1 / c2;
  grid-row: r1 / r2;
}

spanキーワードを使う

グリッドラインの代わりにいくつ先のラインに伸ばすか記述する方法もあります。
下記の「grid-row」だとグリッドライン2から2つ目までという意味です。

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / span 2;
}

ここまでのサンプルです。

簡単にですが、CSS Grid Layoutの基本的な使い方をお伝えすることができたでしょうか??

グリッドの指定が独特ですので、「GRID GARDEN」というゲームを触りつつ、慣れてみるものありかもしれません。

対応ブラウザについて

https://caniuse.com/#feat=css-grid
Edgeも対応され、これから徐々にグリッドレイアウトのサイトが増えてくるかもしれませんね。

次回は、具体的レイアウトを元に使い方をお伝えしようと思います。


デザイナーとエンジニア間のデザインもろもろを助けてくれるツール「Zeplin」

こんにちは。デザイナーのKです。
最近アプリのUIデザインを手がけることが多いのですが、その際にエンジニアと「デザインのもろもろのやりとり」問題が生じることが多々あります。

 

完成したアプリを確認すると、

・画像の比率が違う
・余白がバラバラ
・フォントサイズがバラバラ
・思っていた画面遷移じゃなかった

などなど…

 

デザイナーが思っていたものと少し違ったデザインで、アプリが出来上がることがありました。
アプリにとってUIは非常に重要な要素であり、出来る限りアプリの完成形はデザイン通りに完成することが求められます。
何かアプリ側のデザインに間違いやズレなどがあったときに、その都度エンジニアにデザインの画像を送って見ながら調整するのは、とても手間がかかり工数も圧迫します。
そこで今回、私が担当しているアプリのUIデザインで導入しているツール「Zeplin」をご紹介します。

 

『Zeplin』とは?

『Zeplin』
https://zeplin.io/

『Zeplin』は一言で言うと、「デザイナーとエンジニアのUIコミュニケーションツール」です。
「UIコミュニケーション?」と思われる方もいるかと思いますが、要は『Zeplin』を使うことによって、デザイナーとエンジニアのUIの認識を共通化させることが可能になります。

『Zeplin』のインストールや使い方は、調べるとすぐに見つかりますのでここでは書きませんが、以下の画面のようなイメージで、

 

・オブジェクト間のマージン情報
・オブジェクトのサイズ、角丸のサイズ

などがクリック一つでわかるようになります。

 

特にエンジニアの方に役立つのは、「マージン情報」や「フォント情報、カラー情報」などではないでしょうか?
それらも『Zeplin』ならひと目で情報を瞬時に知ることができます。
また、Swift3のコードもクリック一つで自動生成され、使用することもできます。

 

 

他にも便利な機能として、「コメント機能」があります。
以下の画面のように、デザイン画像にコメントを残すことができ、さらにそのコメントに返信することができます。

各イメージ画像は弊社サービスの『Sportare』のデザインになります。

 

『Zeplin』を導入してみてわかったこと

現在進行中の弊社の案件でも、私とエンジニアとの間で『Zeplin』を導入してプロジェクトを進めています。

 

導入してみてデザイナー側から思ったことは、

・デザインの細かい数値がひと目で見えるのでエンジニアに伝えやすい
・コメントを付けて返信も見ることができるので、確認漏れが減った
・Sketchとの相性が良いので、最新のデザインをすぐにアップロードできて共有しやすい

など、非常にメリットが多いです。

 

コメントや履歴の検索ができないことがデメリットとしてありますが、今後改善されればと思います。
しかし、そういったデメリットを上回るメリットが『Zeplin』にはあるので、今後もバシバシ使っていこうと思います!

無料版は1プロジェクトまでしか対応していないので、実務で使うとなると厳しいですが、試しに使うには十分ですので、ぜひ一度使ってみてはいかがでしょうか?
 

さいごに

ということで、今回は「デザイナーとエンジニアのUIコミュニケーションツール Zeplin」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい!という方は、ぜひこちらからお気軽にお問い合わせください^^


イラストのタッチを描き分ける

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

最近は家でサーモンランばっかりやっています。

 

 

私は元々イラストを描くのが趣味なのですが、最近はイラストを描く仕事もちょいちょい回してもらえるようになりました。

なので今回はイラストの話をします。

 

 

webサイトや印刷物などに使用する素材としてイラストを描くとき、まず考えることは、どういうタッチのイラストにしようかな?ということです。

もしイラストのタッチが周りのデザインと調和していなければ、デザイン全体のイメージを壊しかねません。

 

私がイラストを描くとき、具体的にどうやってタッチを描き分けているかをご紹介します。

 

線画を描く

 

タッチの描き分けでは、線画の描き方が最初の大きなポイントになります。

線画を描く際に大切なのは、何の画材を使用するかということです。

鉛筆、シャーペン、クレヨン、ボールペン、つけペンなど、使用する画材によって線自体の持つ印象が大きく変わってきます。

 

ですが、いろいろなバリエーションの画材を集めたり新しい画材に慣れたりするのは大変で時間がかかるので、イラストソフトを使用するのも良いと思います○

 

今回はイラストソフトとペンタブレットを使用して線画を作成しました。

上の線画は鉛筆っぽいブラシで、あえて線を繋げないところなどを作ってラフな印象で描いてみました。線の強弱は抑えめです。

下の線画ははっきりしたブラシで、カートゥーンアニメっぽいイメージで強弱をつけ描いてみました。

 

ラフなアナログっぽい印象を出したいときは用紙感多めの鉛筆風ブラシ、はっきりした印象を与えたいときはテクスチャ感の少ないブラシを使用すると良いと思います。

また、同じ画材やブラシでも、線の太さや強弱の有無によっても大きくイメージが変わりますので、いろいろ試してみてください。

 

 

色を塗る

 

色の塗り方の描き分けで大切なことは、手作業感を残すか否かだと思います。

手作業感とは色の塗りムラや塗り残しです。

 

手作業感を多く残せばアナログっぽさが増し、温かかったり柔らかかったり自然っぽかったりラフっぽい印象を与えることができます。

逆に手作業感が少ないと均一な感じや人工っぽい感じ、硬い感じ、はっきりした感じの印象を与えることができます。

上のイラストでは、塗りムラや塗り残しをあえて作り、水彩絵の具で塗ったような着彩を目指しました。柔らかくて透明感のある印象が出せたと思います。

 

下のイラストはそういった手作業感を残さず、ベタ塗りのみで着色しました。はっきりしていて存在感と質量感のあるイラストになったと思います。

 

 

もちろんはっきりした線画で水彩風の塗りや、ラフな線画にベタ塗りをするなどの組み合わせもありです。

また大きくイメージが変わりますのでよろしければ試してみてください。

 

イラストのタッチというものは好みによるところが大きいので、趣味で絵を描いたりしているとどうしても一つのタッチにこだわりがちになってしまいます。

それを画風として個性を発揮するのももちろん良いことですが、素材としてイラストを何かに組み込むときは画風を一旦忘れることも必要になってきます。

線の引き方や色の塗り方など、他の人の作品などを参考にしながら色々と試し新たな技術を身に着けて、タッチや画風の選択肢を広げることも大切だと思います。

 

 

まとめ

 

・線画は画材やブラシによって大きく印象が変わる

・塗りは塗りムラ・塗り残しなど手作業感を残すか否かで印象が変わる

・自分が好きな絵柄やタッチなどにこだわりすぎず、いろいろな線の描き方や色の塗り方を試してみることが大事

 

ご閲覧ありがとうございました!みなさんも良いイラストライフを(・▽・)/


デザイナーもそろそろ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.お買い物ガイドでさらに使いやすく!

お買い物ガイド画面

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

 

さいごに

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