こんにちは。二年目デザイナーのはなです。

私はドドド文系かつ、今のところ人生でパソコン使ってる時間より紙と絵の具触っていた時間のほうが長いようなアナログ街出身の感覚派ですが、この度「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」というエンジニアさんの言葉により、XcodeのStoryboardを使ってみることになりました。

もちろん私の経験値はそのような状況（かろうじてHTMLとCSSはわかる…）ですので、傍から見ると低い段差に躓きまくりました。

それでもなんとかエンジニアさんからの介護を受けて、アプリのガワだけ作成することができ、「何このソフト…？英語しか書いてない…怖いよ～…」という状況からは脱しました。

こういうかたちのボタンはこういうふうに作れば良いんだよ、というのを理解するのに丸一日かかったりしました。

このボタン一つを苦戦しながら作って、どの画面サイズで見ても破綻していなかったときはとても感動したりしました。

あまりにも初歩的すぎますが、レベルが赤子なので見るものすべてに感動してしまうんですね。

Storyboardできる人は、まあ、一笑に付していただけると幸いです。

Storyboardを使ってみてよかったなと思ったこと

あとからエンジニアさんに細かいデザイン調整のお願いをしに行かなくて済む！

「すみません、ここなんですけど、あと10pxぐらい余白つめてもらっていいですか…」がなくなりました。

全部自分でつけてますからね。

「ここはシステム上これ以上余白詰めるのは難しいです」「そこをなんとか」という工程もなくなりました。

システム上難しいということを踏まえた上でデザインを作ればいいのです。

それが理解できるようになったことは、すごく大きな収穫だったなと思います。

画面の大きさによってどのようにレスポンシブさせるか自分で決められる！

例えばiPhone8の画面サイズで作ったUIデザインについて、5sの時はどこをどういうふうに縮める？iPhoneXやiPadの時はどこをどうやって伸ばす？というのを自分で決められます。

あとからエンジニアさんにお願いして変えてもらうとなると、下手したらAuto Layout付け直しじゃないですか（それも理解できるようになりました。そりゃ面倒くさいですね）

それを最初から自分で指定できるというのは、かなり効率がいいです。妥協もしないで済みます。

標準的なiosアプリのデザインがなんとなくつかめるような気がする！

Storyboardにはiosアプリの標準UIのパーツが元から入っています。

ドラッグするだけで置けます。すごい便利ですね。

逆に、「置けない場所」というのもなんとなくつかめてきます。

そうやって試行錯誤しているうちに、iOSアプリの標準的なデザインが、なんとなくわかってきたような気がします。

まとめ

　Storyboardを触ってみて、「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」という言葉の意味がわかりました。

見た目の微調整が自分で行えるということの素晴らしさを、デザイナーさんなら理解できると思います…

とはいえ、まだ入り口に立った段階ですので、これからも四苦八苦しながらStoryboardくんと仲良くやっていけるよう頑張りたいと思います。

Tweet

デザインをする上で字詰めって大事ですよね。
でもWebページのテキストは、ブラウザの仕様で調整出来ないから諦めていたり…。
そんなことはないでしょうか？

字詰め

実は、CSSに字詰めのプロパティ「font-feature-settings」があります。
使い方は簡単で、「font-feature-settings : “palt”;」を指定するだけです。

    .kerning_sample{
        font-feature-settings : "palt";
    }

注)メイリオは、プロポーショナルメトリクスを含まないため変わりません。

　
例えばデフォルトだとこのような表示だったのが

　
font-feature-settings:”palt”;の指定をすると全体が引き締まった感じになります。

　
場合によっては窮屈な感じがするので、「letter-spacing」を使って調整しましょう。

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }

デフォルトと比べて、カッコや句読点の間などが整ってると思います。
各ブラウザの対応もいつの間にか整っていました。
各ブラウザの対応状況

両端揃え

字詰めのプロパティ「font-feature-settings」を使ってブログの本文や説明文などの右端がガタついて気になった場合は、「text-align:justify;」を使ってみるのもいいかもしれません。
デフォルトだと右端がガタついていますが。

　
「text-align:justify;」を使うと右端がそろうと思います。

　
毎回、字詰めの調整や確認は大変ですが、この方法だと以外に簡単にできるかもしれません。
Webコンテンツを作る際に役立てていただければ幸いです。
　
　

Tweet

デザイナーのMです。
日頃UIデザインなどを担当しているのですが、メインのカラーやキーカラーなどが決まっていないときによくどう配色すればいいか悩みます。

そんなとき参考になるのが「配色ツール」です！
今回は私がデザインする際や、デザイントーンを決めるときに使用する色に悩んだ際に利用する「配色ツール」をご紹介したいと思います。

原色大辞典

WEBでよく使われる色などが一覧で見ることができる配色ツール（サイト）です。
すべての色にコードが記載されているので、すぐに使うことができます。

https://www.colordic.org/

Adobe Color CC

Adobeが提供する配色ツール。
類似色や補色などのテーマを選んでカラーをドラッグするだけで、そのカラーに応じた5色が自動で選択されます。
Adobeのサービスなので、パレット登録しておくとIllustratorやPhotoshopと連携することができます。

https://color.adobe.com/

Coolors.co

スペースキーを押すと素敵な配色がランダムに表示されます。
色のロックやパレットの作成、またURLが選んだカラーコードになっています。


https://coolors.co/

Color Hunt

毎日更新されている配色紹介サイト。美しい配色例などをカラーコードと一緒に確認することができるギャラリーのようなサイトです。
人気順で配色を並び替えると、今流行りの色や配色のトーンを見ることができてとても勉強になります。

https://colorhunt.co/

HUE/360

黒から白への明暗差に対応して色相を確認することができる配色ツールです。
色相の数やRGB、彩度などを細かく指定しながら色相をシミュレートできます。
操作も簡単で、とても使いやすいツールなので私もよく使っています。

https://hue360.herokuapp.com/

とても多くの配色ツールがありますが、自分の使いやすい配色ツールを見つけるのはけっこう大変で手間だったりします。
今回は私が日頃使用するツールを紹介させていただきましたが、少しでも誰かの役に立てればと思います。

Tweet