わたはるのデザインのリファレンス集
こんにちは。KAI-YOU開発部わたはるです。
ポケモン買いましたがあまり進んでません。バッジ3つ目です。
今日は私がよく参考にしているデザインのリファレンス集を紹介します。
デザインの勉強を座学としてやったことがなくて、毎日何がいいデザインなのか迷うことばかりです。
そんな私がすがる思いで集めたデザインリファレンス集を今日はご紹介します！自分が今制作したいもの、制作しなければいけないものをこれらのサイトをヒントにして作っていってます。
- 1.ビジュアルイメージで参考にするサイト
- 2.UIデザイン面で参考にするサイト
- 3.LPデザイン面で参考にするサイト
- 4.バナーデザイン面で参考にするサイト
- 5.アイコンデザイン面で参考にするサイト
- 6.カラーを決める際に参考にするサイト
1.ビジュアルイメージで参考にするサイト
デザインの仕事を始めてからたくさん使うようになりました。 Pinterestはボードといういわゆる探した画像をフォルダ分けできるような機能があるのですが、Webとかロゴとか紙ものとか適当に分類して自分が直感的に好きだなと思ったものをポイポイ入れてます。自分の好みがなんとなく分かって面白いです。
2.UIデザイン面で参考にするサイト
collectui.com
uimovement.com
UIを考えるときに競合サイトをまず見るのですが、色々と見た末に結局何がいいのか分からないという状況によくなります。そんな時はこの２サイトを見て、今イケてるUIは何か、では今回の発見された問題に対して解決をもたらすと思われるUIはなんなのかを考えていきます。眺めるだけでもなんでこうしたんだろうな〜とか考えるので勉強になりますよ。
3.LPデザイン面で参考にするサイト
muuuuu.org
lp.webdesignclip.com
KAI-YOU開発部は基本的に自社開発がメインの業務ですが、たまにクライアント様からご依頼をいただいてLP制作をやることもあります。（ｺｯｿﾘ）最初にご依頼頂いたときに、必要最低限サイトに記載する情報をまとめた後、似た性質のサイトを探してきて追加したい要素などをクライアントに提案してワイヤーフレームを作ります。
4.バナーデザイン面で参考にするサイト
banner.keizine.net
retrobanner.net
バナーデザインは正直すごく苦手です。バナーとしてのデザイン、サイトとの整合性、どんな文言がクリックされやすいかなども考えながら作ります。上記のサイトを見て参考にしながら、色んなクリエイティブを作ってみて日々クリックされやすいバナーを目指しています。
5.アイコンデザイン面で参考にするサイト
simpleicons.org
thenounproject.com
アイコンを選ぶときはこのサイトを参考にしています。あるキーワードから連想する自分のイメージとは違うものも出てくることもあるので面白いです。
6.カラーを決める際に参考にするサイト
coolors.co
webgradients.com
自分で決めたカラーがしっくりこない、なんとなくハマらない時にはここを見ます。 メインで使いたい色だけ決めて、後は勝手にカラーをレコメンドしてくれるので楽です。いわゆるノンデザイナーの人にもオススメしたいサイトです。
まとめ
簡単になりましたが、私がよく使うリファレンス集をご紹介しました。インターネット上には非常に優れたリファレンスが多く存在してますね。自分に合うリファレンスを見つけていいデザインを作っていきましょう〜。
それでは、わたはるでした。
DJの選曲にもレコメンドがあると楽じゃないか？それTraktorでもできませんかね!? Vol.3
はい！KAI-YOUエンジニアのコウベ(@cabbagekobe)です。
というわけで前回の続き！
前回の記事はコチラ！
今回やっていくのは「Traktorで再生中の曲をどうやって取得していくのか」です。
とはいえTraktorには直接に再生中の曲情報などを取れるAPI、ましてやプラグインなどもありません！
なのでTraktorに用意されているbroadcasting機能を使っていきます。
これを使うと完全ではないですが、楽曲名、アーティスト名をjson形式で取得できます。
そしてそのやりかた
まずicecastをインストールします！
Icecastとは
Icecastは Xiph.Org Foundation が運営するストリーミングプロジェクトであり、その成果はフリーソフトウェアとしてリリースされている。特にプロジェクトの一部であるサーバプログラムを指すことがある。Icecast は1998年12月から1999年1月にかけて Jack Moffitt と Barath Raghavan が誰でも修正・利用・改変可能なオープンソースの音声ストリーミングサーバとして開発したのが最初である。バージョン2の開発は2001年に始まり、各種フォーマットをサポートしスケーラビリティを向上させるため完全に書き直された（それ以前は Ogg Vorbis だけを対象としていた）。
https://ja.wikipedia.org/wiki/Icecast より
本来的な役割としてはストリーミングサーバーを立てることが目的ですが、ここはとりあえずあまりなにも考えずインストールしましょう！（Homebrewで）
Icecast周りの準備
まずはインストール
brew install icecast
でインストールされます。
そしてicecastを起動しましょう！
$ icecast -c /usr/local/etc/icecast.xml
（/usr/local/etc/icecast.xml が設定ファイルになってまして今回は省きますが必要があればちゃんと設定しましょう）
そうしますとこちらにアクセスできるようになるはず！
http://127.0.0.1:8000/status-json.xsl
Traktor周りの準備！
次にTraktorから設定していきましょう。
設定を開きましてBroadcastingタブを開きまして、こんな感じに設定していきましょう！
パスワードは上記の/usr/local/etc/icecast.xmlのファイルに書いてありますが、初期設定は"hackme"になっているはず…
そうしましたらばこちらのボタンを押してBroadcast機能をオンにしましょう！
（ちなみに設定がキチンとしていましたらボタンは点灯状態になります。点滅してたらなんか設定がおかしいよ〜ってことなのでなにか見直しましょう）
情報を取得する！
上記のようにicecastの設定、Traktorの設定がキチンとされており、曲を再生してちょっと待ってから改めて下記URLにアクセスしますと、楽曲情報が吐き出されているはずです！
http://127.0.0.1:8000/status-json.xsl
こんな感じに！
楽曲が変わるごとに上記URLの情報も変わりますので、こちらのURLから定期的にアーティストと曲名を取得しつつ楽曲DBとかに投げて情報を取得していけるはずです！
というわけで次回は最終回（予定）！
spotify APIから取得した情報を入れたDBから今再生中の楽曲と似た曲をリストアップするぞ！です。
乞うご期待！！！！！
Adobe Dimension CCを使ってハッコウくんジュースの缶を3Dで作ってみる
こんにちは。KAI-YOU開発部わたはるです。
突然ですが、最近3Dの画像制作にハマってます。 blenderというモデリングソフトをご存知でしょうか？（おっとこんなブログが...）
実を言うとblenderのモデリングは挫折しました。だって難しいんだもの。 でも3D簡単に作りたい、作れた方が色々できる...。
そんな時にAdobe Creative Cloudに追加されたのが、Adobe Dimension CCです。
Adobe Dimension CCとは？
公式サイトを見るとこのような感じのことが。
ブランド、パッケージ、ロゴのデザインを、フォトリアリスティックレンダリングを使用して3Dデータに反映します。ロゴやベクターグラフィックをドラッグ＆ドロップで3Dモデルに追加して、デザインコンセプトが実際にどのように表現されるのかを見ることができます。さらにアプリケーション内から、Adobe Stockを検索して、Dimension用に最適化された3D素材を探すことも可能です。
要するにPhotoshopやillustratorで作った素材を、すでに用意されているモデルに反映して3D画像を作ることができるってことですね。 そんなに簡単なんですか...?と半信半疑。私みたいなblenderのモデリングに挫折した人間にはぴったりなのでは。早速使ってみましょう。
3Dモデルを配置
まずは3Dモデルを配置していきます。 画面の左側にスターターアセットというものがすでに用意されています。
はじめに用意されてるアセットだけでもかなり量がありますね、ワクワクしてきました。これらの素材を好きに配置していきます。
右クリックで好きなアセットを画面まで引っ張ってきてドラッグ&ドロップで配置することができます。 左クリックをしながらマウスを動かすと視野の移動もできるで好きな視野から、好きなようにレイアウトをしていきます。 あ、これ必要なかった！となった時にはデリートキーで削除できるので、あまり考えずにポイポイ画面に追加していきましょう。
次に配置の時に使えるツールのご紹介を簡単にしていきます。
移動ツール
X軸、Y軸、Z軸それぞれの矢印をドラッグ&ドロップすることで移動することができます。
それぞれ矢印を選択した状態だと一方向にしか動きませんが自由に動かすこともできます。
拡大・縮小ツール
3D空間で、モデルを拡大・縮小することができます。
ただのドラッグだけだと、モデルの比率が変わってしまうので、変えたくない場合はShiftキーを押しながら。
右側に比率設定をするところもあるので数値で2倍にしたい、3倍にしたいの場合はそちらをお使いください。
回転ツール
移動ツールと同じく、X軸、Y軸、Z軸の矢印でぐるぐるモデルを回転させることができます。 立体に動きが出るのでこれぞ3Dの醍醐味って感じがしますね。
モデル配置ができました！
結果こんな感じになりました。いい感じですかね...？ まあモデル配置の変更も気軽にできるのでとりあえず進めていきましょう。
マテリアルを設定
次にマテリアルを設定していきます。マテリアル、つまりは材質のことですね。こちらも左側のメニューから設定ができます。
スターターアセットのマテリアルもかなり充実してますね。 この材質の感じ2Dで出すの本当大変なんだよね...というところまで手が回ってるのでAdobe先生に大感謝。足を向けて寝ることができません。
今回は周りのスプラッシュと缶の結露した部分に「水」のマテリアルを適応しました。 色なども右側のメニューから変更できます。水なので青系または白系がいいかなと思います。
缶の表面に装飾を加える
モデルに貼りたい画像を用意します。 今回私はこんな感じのものにしました（なんかの清涼飲料水っぽいとは言わないでください） 弊社マスコットキャラクターのハッコウくんです。お見知り置きを。
こちらの素材を缶の3Dモデル直接ドラッグ&ドロップ！ するとこのようにモデルに貼り付けられます。非常に簡単ですね。対象がうまく入らなかった場合はカーソルを動かすことで調整ができるのでそこは適宜やってみてください。
ライト、環境の設定
ここまできたらレンダリングまであと少しです！ ライトと環境の設定をしていきましょう。こちらもまた左側のメニューからお好みのものを選んでください。
色々試してみてレンダリングした時に綺麗に発色してくれそうなライトを選びました！ また、右側のメニューから日光（光点）の高さや曇り具合などの環境設定ができるので一緒にやってしまいましょう。
完成
ごにょごにょ設定してレンダリングした結果がこちら。
ハッコウくんのジュースの缶を作ってみようかな...と思いつきでやってみました。 ハッコウくんは深海魚がモデルに作られたキャラクターなのですがどんな味になるか私も想像がついていません。
他にも作ったもの
Adobe Dimension CCのもう一ついいところはレンダリングしたモデルをpngとpsd形式で書き出せるところです。 psd形式で書き出した場合はレイヤーごとPhotoshopにインポートが可能なので写真素材などと組み合わせたり、文字を組み合わせてあげたりがしやすいです。最近他に作ったものは以下の通り。
まとめ
Adobe Dimension CCはかなり感覚的に使えるソフトだなという印象でした。 というのもblenderを触った時にはかなり独特のUIで混乱してしまい、その時点で嫌になってしまったのですが Dimensionはそういうこともなくすんなり入っていけたなぁという感じです。AdobeのUIに慣れてる人は余計にかもしれません。
また、モデリングできないけどスターターアセット以外のものを使いたい！という人向けに、Adobe Stockでも3Dモデルを提供していますし、無料の3Dモデルもインターネット上にたくさん落ちているのでご安心ください。（拡張子がobjのものだと互換性があります）
使ってみると本当に簡単。習うより慣れよ、という感じなのでぜひぜひDimensionでなんとなくオシャレな3Dをサクッと作ってみてください。
お知らせ
「他に作ったもの」のところにしれっとフライヤーを載せておきましたが、KAI-YOUで第2回エンジニアミートアップを開催します。
「まだ転職は考えてないけど、なんとなくKAI-YOUに興味があるよ〜」って人、「Webメディアの開発チームが何やってるのか気になるよ〜」って人とかお気軽に遊びに来てください。堅苦しくやりませんので（私が耐えられない）
それでは、KAI-YOU開発部わたはるでした。
