ブログ

ヒロフロデザイン部 ご参加ありがとうございました!

disign-study

こんにちは、デザイナーのTantanです。

4/1土、ヒロフロデザイン部Vol.1を開催させていただきました。
12名ほどの方にお集まりいただき、おかげさまで活発な情報交換ができました。ありがとうございました!

ご参加いただいた方々

どんなことをされてますか、という質問では、デザイナー・フロントエンドエンジニア・サーバーサイドエンジニア・アプリ開発・webマーケターなどのお答えが。皆さん何かしらデザインに関わっているようでした。

ソフトウェアについては、ほとんどの方がPhotoshop・Illustrator、他を使ってる方は少ないようでした。
Illustratorが意外と市民権を得ているようで、ほっとしました。
(個人的にはAdobeXDなども今後取り上げていきたいです。)

開始前アンケートでテーマを決定

勉強したいテーマについてご回答頂き、人気のテーマから順に取り上げてお話しました。
結果、取り上げたテーマはこちら。

  • グリッド(8票)
  • 画像書き出し(8票)
  • カラーコードの管理(6票)
  • アイコンフォント(5票)

ここまででタイムアップ。
持ち越されたテーマはこちら。

  • ベジェ曲線のイラスト(5票)
  • 和文フォント(5票)
  • コンテンツの幅(4票)
  • 自由回答 webデザインのトレンドについて

各テーマについて情報交換

今回はスライドも、すべてIllustrator上でやらせていただきました。
(イラレのパネル丸出し状態でしたが、自分的には落ち着くスタイル)

1.グリッド

みなさんグリッドはどうやって活用してますか、という話題。
私はイラレの「段組み設定」で整数を探しながらグリッドを作るデモをさせていただきました。
他には、ブートストラップやファウンデーションを使ったことがある、という声もありました。

あと社内用に独自のグリッドシステムを用意している、という方も!
すごいです。今度ぜひ詳しく教えてほしいです。

それから、「ガイドとグリッドってどう違うんですか」という質問をいただきました。
ガイドはデザイナーが状況に応じて任意の位置に置く、という使い方が多い。
一方、グリッドは溝を含めてあらかじめ2分割・3分割・4分割などの割り方を定義しておくもの。それによって、デザインに統一感が生まれる。
あと、エンジニアのみなさんから「グリッドに従ってくれたほうがコーディングがしやすい」という声があがりました。

その他の意見
Photoshopでは、GuideGuideというプラグイン(有料)もあって便利、小数点の端数を出さないためには計算機が要る。
web上に「グリッド計算機」というのもある→Gridpx:グリッドデザイン計算機

2.画像書き出し

画像の書き出しのやり方。
とりあえずIllustratorでのアセット書き出しとアートボード書き出し。もたつく様子を見守られながらデモを披露させていただきました。
スライス書き出しにいたっては、よくわからないので後ろから教えてもらってました(汗;)

ピクセルのズレ対応ってどうしてる、という話題も。
「Fireworksならあんまりズレない」
「Illustratorのピクセルグリッドに整合もいいよ」「それどこにあるの?」「アップデートしないと無いよ」とか、
「スライスのときは変形パネルの数値を打ち込んでる」などなど。

書き出しの名付けルールのお話も勉強になりました。

3.カラーコードの管理

Illustratorのグローバルカラーの話から、16進数のカラーコードをどうやって抽出するかという話へ。
イラレでは、カラーパネルの他に、ツールパネルやCSSプロパティパネルなど複数の方法で見ることができるとか、MacのユーティリティーのDigital Color Meterというのも教えてもらいました。

文字の色は段落スタイルでも定義できるよね、という話も。
「でも段落スタイルが使いにくい」と、いかに使いづらいかアピールする私。

何にせよ、エンジニア側からは「色を整理してくれ、微妙な色差を使うならちゃんと指示書くれ あと透明色で色調整するな」というご意見。ごもっともでございました。。。

4.アイコンフォント

Font AwesomeとかGoogle Material iconsとか使ってますか、という話。みなさんFont Awesomeは馴染みがあったようです。
とりあえず、Google Material iconsをインストールしてイラレで使うまでの基本操作を説明しました。
そして、私が知らなかった、イラレ上のアイコンをGoogle Material iconsサイトで逆引きする方法を教えていただきました!(感激)ありがとうございます!
個人的に最も盛り上がった瞬間でした。

おまけ

和文フォントは今回取り上げられませんでしたが、終了後に質問をいただきました。
「ヒラギノを使いたい時、Winではどうすればいいでしょう」ということで、
Winにヒラギノは搭載されていないので、「Macはヒラギノ」「Winはメイリオ」という指定をすることが多いかと。
MacとWinで同じゴシック体フォントを使いたければ、游ゴシック体が使えます。
ただし、游ゴシック体が搭載されているのは比較的新しいマシンなので、「ヒラギノ+メイリオ」の方が古いマシンにも対応できるかと思います。

実際にみなさんがどのように設定しているか、ぜひ次回聞いてみたいです!

感想アンケート

次回やりたいことを聞いてみました。

  • 素敵サイトの模写(9票)
  • デザインタイムアタック(3票)
  • イケてないデザイン品評会(7票)
  • 自由回答 お絵かき、デザインガイドについて、Wordpress、余白のとりかた

その他、「初心者でもわかりやすくためになりました」、「興奮しすぎて汗だくです!」という嬉しいご感想も(^^)

とっても勉強になりました

私自身、発見や気づきをたくさんいただけました。ありがとうございました。
本当はもっと全員に話をふる勢いでいきたかったのですが、慣れない進行で心の余裕がなく、次回への課題となりました。
それでも質問していただいたり、助け舟を出していただいたり、発言してくださった方には大感謝です。
もちろんそれを聞いて見守っていただいた皆様も、ありがとうございました。

ぜひ、近いうちに第二回を開催したいと思いますので、またよろしくお願いします!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. DSC_0704 広島フロントエンド勉強会 Vol.1 開催レポート
  2. WEBTOUCHMEETING-talk 第92回「WEB TOUCH MEETING」に行ってきました!…
  3. news_study CSS Nite in HIROSHIMA, Vol.9に参加し…
  4. Hirofuro-logo-8 「広島フロントエンド勉強会 Vol.9 & デザイン部 Vol.…
  5. 2027thum オープンセミナー2017@広島に参加してきました
  6. img_0350 噂のカスタマージャーニーマップの研修を社内でしたのでまとめてみた…
  7. Hirofuro-logo-8 広島フロントエンド勉強会 Vol.10 開催のお知らせ
  8. tsubomi 4月7日 お花見の参加者を公募します

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP