カテゴリー: デザイン

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

昨年11月、会社のスマートフォン・タブレット補助を利用し、iPad proを購入しました。

私はイラストが趣味なので、iPad proとApple pencilをデジタルイラスト作成に使用しています。

iPad proをイラスト作成のために使用するという観点からの、個人的な感想をご紹介します。

もし購入を迷っている人がいれば、判断材料の一つにしていただければ幸いです。

良かった点

どこでも絵が描ける

iPad proはイラストソフトさえ入っていれば、これ単体で絵を仕上げることができます。

パソコンなどにつなげる必要もないので、すごくコンパクトです。

外に持っていって喫茶店などでも使えるのはもちろん、お布団の中で寝転がりながらでも絵を描くことができます。

部屋が寒くて机に座って作業する気が全然起きないときでも大丈夫です。

「とりあえず描き始める」ことのハードルが下がる

普段はmac book proとワコムの板タブで絵を描いているのですが、家に帰ってきてからなかなか机に座って絵を描く気が起きず、今日はもういいかぁと寝てしまうことが多くあります。

ですがiPad proを導入した後は、疲れていても毎日少しは絵を描く気力が起きるようになりました。

「物事をやり始めるまでのハードルが低いほうが途中で挫折しないので良い」とよく言われていますが、確かに考えてみるとPCで絵を描くとなると、

①部屋に戻る

②机に座る

③PCを起動

④ソフトを立ち上げる

と実際に描き始めるまでに結構工程が多いです。

疲れているときなどはこの工程の途中で挫折してしまっていました。

人間いくら好きなことでもやり始めるまでのハードルが多いと（特に疲れてると）簡単に挫折するようです。

iPad proだと

①ホームボタンを押してスリープ解除

②アプリを立ち上げる

と工程が少なく、挫折する前に絵を描き始めることができました。

残念だった点

Apple pencilの替えのペン先がそこそこ良いお値段

私は描き心地を紙に近づけるために若干表面がザラザラしたペーパーライクフィルムを画面に貼っています。

それが原因ですごい勢いでペン先がすり減っていきます…

11月末にiPad proとApple Pencilを購入してから１月半ばまでに二回交換しました。

板タブのペン軸は金属製のものに替えてすり減りを防止したりパスタや綿棒で代用が効くという話もありますが、Apple pencilのペン先は専用のものなので代用品がありません。

ペン先はそこそこ良いお値段なので、この調子で使い続けると出費がわりと痛いことになりそうです。

その代わり描き心地は上々なので、ペン先がすり減るのはもう仕方のないことだ、これは必要経費だと割り切ることにしました。

充電が必要

当たり前の話ですが、iPad proもApple pencilも充電が必要です。

PCにペンタブだと、PCに電源コードを差しっぱなしの状態で作業を始めた場合、充電切れによって作業を中断させられることはありません。

iPadで作業をしていると、たとえiPadに充電器を接続しっぱなしの状態で作業を始めたとしても、連続で作業し続けているとApple pencilの充電が切れて作業が中断します。

また、Apple pencil単体では残充電量が見られないため、気がついたら電池が減っていて、集中しだしたタイミングで充電切れにより強制的に作業中断、ということが何回かありました。

ですがこれも仕方がないので、「毎晩ちゃんと充電する」「休憩しているときは必ず充電する」といった習慣をつけ、お絵かきがノッてきたタイミングで強制中断しないように気をつけることが大切だなと思いました。

まとめ

私の個人的な感想の結論としては、絵を描く頻度とスピードが上がったので買って大正解でした！（スマートフォン・タブレット補助、本当にありがとうございました）

ですが相性などもありますし、iPad proが全人類のお絵かき技術をすぐに上げてくれるわけではありません。

（そもそも液タブを所持していて、かつ、ちゃんと机に座って毎日絵を描く習慣をつけている人は別にiPad proが無くても良いような気もします…）

ですが私のように基本性質がなまけものでめんどくさがり屋で、寝転がりながら落書きしたりするのが好きな人にはとてもおすすめします。

2018年は、パソコンを使って本格的に描くのは休みの日の元気がいっぱいあるときにして、平日などはiPad proで毎日「とりあえず描き始める」ことを目標に、もっとお絵かきの練習頻度を上げて技術向上を図れたらいいな！と思いました。

Tweet

 
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;
}

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

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」だとグリッドライン２から２つ目までという意味です。

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

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

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

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

対応ブラウザについて

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

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

Tweet

こんにちは。デザイナーの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」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい！という方は、ぜひこちらからお気軽にお問い合わせください^^

Tweet

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

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

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

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

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

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

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

線画を描く

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

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

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

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

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

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

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

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

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

色を塗る

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

Tweet

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

「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という選択肢も悪くないですよ♪

Tweet