ほんきでUIデザインがスタートしました!

みなさんこんにちは。
学校事業部の古谷です。

ほんきでUIデザインの新学期がはじまりました。
今回受講生はグラフィックデザインをメインでやられてきた方、webデザインを独学でされてた方、フロントエンジニアの方などなどです。

1回目

1回目の授業はwebデザインのおさらいという感じで進んでいきました。

  • 解像度のお話
  • ディバイスサイズ
  • webデザインのタイポグラフィ
  • 実際のサイトを例にレイアウトのパターン
  • アトミックデザイン

最近UI系のツールはいろいろ出ていますが、みなさんどれを使われていますか?
便利なものが増えPhotoShopでwebデザインする方は減ってきていますね。

XD https://www.adobe.com/jp/products/xd.html
XDは無料でダウンロード可能。共有機能がついていて、クラウドに保存も可能で、いろいろな人と編集することができる。しかしその機能はAdobeクリエイティブクラウドに契約してないと難しいようです。でも使い方も簡単なので、私はよくワイヤーフレームを書く時など使用しています。そうすればデザイナーとも共有しやすく変更点なども随時共有できとても便利です!
もちろんプロトタイピング機能もあります。しかし細かいベクター操作はできないので、そこはIllustratorで作ってからコピーして制作していく必要があります。なのでXDは細かい操作はIllustratorやPhotoshopで制作しレイアウトはXDで制作していくという使い方がとてもベストです。

Sketch https://www.sketch.com/
SketchはUIデザインが主流になっていった時に一番最初にいろいろな方々が使い出したツール。最初は1回買えば一生使える感じでしたが、今は1年単位でアップデートしていかないといけません。最初は1年$99くらいで、年々使っていくとだんだん安くなるようです。また使用するディバイスも増えると1台当たりの値段もやすくなるなるようですが、 Sketchサイトが英語のみなのでなかなかわかりにくい部分があります。しかしSketchはベクターの操作もできますし、この1台で充分デザインをすることができます。もちろんプロトタイプ機能ありです。

Figma https://www.figma.com/
こちら最近人気が出てきましたFiguma。ある程度無料の範囲で使えます。1つのデータ編集も2名までは編集可能で、見るだけなら無条件でいろいろな人に共有できます。またベクター操作もでき、結構細かい操作ができますし、もちろんプロトタイピングも可能。有料プラン月$12、月$45もそんなに高くないので使ってみてもいいかもです。

今回は授業でXDを使用していきます。座学と演習をしながら理解を深めていきました。次回は実際にwebサイトをデザインしていき、フォードバック、ブラッシュアップを繰り返ししていきます。


ただいま『ほんきでUIデザイン』開講中

ほんきでUIデザインってどんな先生なんだろう?どんな授業なんだろう?っと気になる方!
ぜひ受講相談・見学を随時実施しておりますのでお気軽にお問い合わせください。
お待ちしております!