WEBアザラシ

デジハリという海で泳ぐアザラシのブログ

最近のWEB開発の進捗がお粗末過ぎて…(泣

 

どーも、あざら氏です。

 

久しぶりにブログを書くので
最近はどういった感じでWEB開発してんねん?ってところから…

続きを読む

久しぶりの近況報告。

 

どーも、あざら氏です。

 

ご無沙汰しておりました。
一時は毎日のようにブログを更新しておりましたが
しばらく滞りがちになっていました…

 

私用で忙しかったと言い訳するのは簡単なんでしょうが、
多分、毎日書かねば!という強迫観念が余計に更新を遠ざけていた様に思います。

(探せば心理学とかに用語がありそう…)

とにかく今回は久しぶりのブログなので私が最近何をしていたのかを
自分のためにもまとめてみようと思います。

続きを読む

【マテデザ初心者向け】Googleリリースのマテリアルデザインのフレームワークがやっぱりイケてる。

 

どーも、あざら氏です。

 

Googleが先日リリースした
マテリアルデザインをWEBに取り入れるためのフレームワーク
話題になっています。

blog.ku-suke.jp

 

気になったので、ちらっと見てみると確かに凄い。

フロントエンドのフレームワーク
簡単に言ってしまえば、
Bsの様にcssが勝手に決まっているので
あとはコンポーネントの通りにコピペして
ちょちょっといじってってタイプのやつです。

中身もこんな感じでBsに似ています。

f:id:zakitaku:20150805171804p:plain

 

何がBsと違うのかと言いますと
もちろんデザイン面が全然違うわけでして…

ベースデザインとして
MaterialDesignを採用しています。

f:id:zakitaku:20150805171531p:plain


上の画像からお分かりになるかと思いますが
若干の陰がついています。
マテリアルデザインとは、
実際にそのパーツが実在した場合を検証し
その通りにデザインするというのが簡単な説明でしょうか。
一応、他にもグラフィカルなフォントや大胆な余白、
そしてアニメーションなどが基本原則とされているそうです。
下のリンクが日本語訳されたデザインガイドライン
公式のガイドラインです。

dev.classmethod.jp


Introduction - Material design - Google design guidelines

 


今見つけましたが分かりやすいデモムービーです。


Material design - YouTube


個人的に好きなマテリアルデザインの作り方。
凄く興味深い製作過程です。


Making Material Design - YouTube



こういった動画は以下のGoogle公式ページにまとめられています。

www.google.com

ドキュメントは基本英語だったりしますが
日本でも大注目なので日本語の記事も多いですね。
特にGigazineさんがガンガン取り上げてくれています。
そういえば僕も初めてマテデザを知ったのはGigazineの記事だっけ…

前にディープシャドウについて書いていましたが
ディープシャドウもマテリアルデザインの表現方法なんですね。


そういえばずっとブログメディアを作りたいと考えていたのですが
Githubにブログ用のテンプレがあるらしいので使ってみようかな…

www.getmdl.io

↑公式のライブプレビューです。

 

でもこういった奴ってページの更新とかどうしたらいいんですかね?
なんかCMSとか入れる感じなんですかね?
そもそもペライチのページしか作ったことない
自分が自前でブログなど…
なんて言っているとコーポレートページも作れないし。
まだまだ勉強ですね…訳ワカメです…

 

 

 

【Clip】ロングシャドウについて学んでみた。

 

Clipは気になったデザインをクリップするコーナーです。

まあどうせ誰も見ていないので完全に自分の備忘録用です(笑)

 

気になったのは最近のトレンドのロングシャドウ。

f:id:zakitaku:20150724175353j:plain

このコーヒータンブラー、右側だけ陰になっているように見えませんか?
スリーブは半分が完全に色が変わっています。
タンブラーの右下も陰のために色が暗くなっています。

最近はこのロングシャドウというスタイルが
UIやサイト、アイコンなどによく取り入れられており
デザインのトレンドになりつつあります。
特に、フラットデザインとの相性が良く印象が残りやすいということで
GoogleカレンダーGmailもこういったテイストになっていますね。

でも色々調べていく内に
あれってマテリアルデザイン的な考え方なんじゃね?とか思ってきました。
マテリアルデザインについても後日まとめてみます。

 

とにかく、ロングシャドウは今流行りなんです!(無理矢理w
特にクラウドワークスなんかでアイコンのコンペがあると
ロングシャドウが良く勝っているという話を聞きます。

じゃあどうやってやろうかという話なんですが
どうやら巷ではpsdのアクションファイルを
使用するのが定石みたいですね。
LIGブログにもそういった特集が組まれていました。

liginc.co.jp


ちょっと初心者にはアクションファイルはキツイかな…
(というかアクションファイルってなんですか?状態)

他にもイラレでは同じオブジェクトを生成して
合体させ、その軌跡で陰を描くといった方法が取られているようです。

5分で完成!イラレで作るロングシャドウアイコン - shoya.io

これもこれで難しい…

下手に自動化するより自分で作ったほうが
早いかもしれないですね(初心者の感想w)

オブジェクトから若干離して
半分を暗くすると良い感じになるのか…
まあこれは円形だからだろうけど…


ちなみに画像自体の引用はコチラ。

わたくしの大好きなWiredさんです。

wired.jp

Wiredもデザインが素晴らしいのでまた理解を深めるために
記事にしてまとめたいと思います。
まあ、Wiredもトレンドのデザインを誌面に取り入れているので
そういった点ではチェックしておくべき媒体の一つだと
個人的には心得ております。

以上!

初投稿。

 

初めまして。あざら氏と申す者でございます。

凄くタイトルが煽る感じのブログですが

(2016/12/30 変更しました…)

これから毎日更新したいと思います!

 

元々、Evernoteの方にデザイン日記を書いていたのですが

誰かにアドバイスを貰えるのではないか?と思っていたり…

 

これから一つ宜しくお願い致します!