Kazmia

046-200-7158

お問い合わせ

(Web)デザイン

デザインのトレンド

こんにちは!スタッフの土屋です。

私は、普段学校でマーケティングや広告業界の流行についても勉強しているのですが、
その中で、webデザインと共通しているなと思うことが多々あります。

ついこの間も広告デザインの授業で、「近頃の広告はカッコづけづらくなっている」という話が出ました。
もっと正確に言うと、「がちがちにカッコいいものはウケなくなっている」です。
そういったものより、等身大でどこか隙があるもの方が、共感を得てウケるようになってきています。
それは、増え続けてきたカッコいいものに対する単純な飽きでもあります。
ゆるキャラの流行などは、端的に現代のそんな世相を示しているのではないでしょうか。

webデザインも例にもれず、
現在はフラットデザインが流行っています。
flatdesign
昨今のUIデザインのトレンド、「フラットデザイン」て何?

Appleも次期iOSからフラットデザインを採用するようです。
フラットデザインは、シンプルでありながらより洗練されて見え、
立体感やテクスチャが強調されていかにも「カッコいい感」のあった
これまでのwebデザインとは一線を画します。
あからさまなCG感もなく、ユーザーとの距離が近く感じられます。

装飾等をそぎ落とす作業というのはとても勇気がいるものですが、
このような一見単純なデザインの場でこそ、デザイナーの技量が試されそうですね。

また、ただ流行りだから、とフラットデザインを取り入れるのではなく
なぜ今これがウケるのか?その裏にどんな世の中の流れがあったのか?と本質を考えていくと、
次の流行まで見えてくるかもしれません。
その時々の流行を、いい勉強の機会にしていきたいな~と思いました。

webサイト/デザインの役割

こんにちは、スタッフの土屋です。

最近webデザインについて勉強中です。
その中で、webデザインをするにあたって
根本的にwebサイト・デザインが担う役割は何だろうと自分なりに考えてみました。

私は、webサイトとは行動への入口かなと感じました。
そしてその連携をスムーズにするのが、webデザインの力のように思います。

消費行動のプロセスモデルは、インターネットの登場によって
AIDMA
・Attention 認知

・Interest 興味

・Desire 欲求

・Memory 記憶

・Action 行動
から、

AISAS
・Attention 認知

・Interest 興味

・Search 検索

・Action 行動

・Share 共有
へシフトしたと言われています。

この、Search(検索)→Action(行動)の間に登場するのがwebサイトです。
最初のAttentionを引くのもwebサイトかもしれません。

webサイトによってイメージ、情報を得て、行動する ということが
私たちの日常にはありふれていると思います。
だからこそ、その最初の入口となるサイトを構成するwebデザインは
影響力を持つ重要な要素です。
こうして改めて考えてみて、
入口から感動を生み出せるようなデザインが出来るようになりたいな、と思いました。

レスポンシブWEBデザイン

今回は、レスポンシブWEBデザインについて…

まずレスポンシブWEBデザインとは?

PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
ゼロから始めるレスポンシブWebデザイン入門 ― 第1回より

そうなんです、PC用スマフォ用などと分けることなく、どちらのブラウザでも素敵に見えるように制作出来るんです。(携帯サイトも出来たらいいのにw)
今後更にこういったサイトも増えてくるでしょうし、きっと近いうち私も制作する機会があると思うので、勉強を兼ねてレスポンシブWEBデザインについて投稿してみます。
もちろんお客様にも参考にしていただけたら嬉しいです。

まず、どのようなレスポンシブWEBデザインのサイトがあるんだろうか…
ということで、「Responsive Web Design JP」という日本国内の秀逸なレスポンシブWebデザインばかりを集めたギャラリーサイトでチェック!

■Responsive Web Design JP
http://responsive-jp.com/
rwdjp

サイドにはレスポンシブWebデザインに関するブログのリンクがありレスポンシブの勉強するにはもってこいなサイトでした。リンクをいくつか見てみましたが、どれも興味深い記事ばかりです!(全部読みたい!)
ギャラリーはちゃんとスマフォ用・タブレット用・PC用での3パターンの表示のサムネイルがあり、いちいちリンク先で確認せずに雰囲気はわかるのでありがたいんです!

でも、ちゃんと見たいなって方にオススメなのが、レスポンシブWEBデザインを想定されるデバイスのサイズで一括表示してくれるこれが便利!↓

■RESPONSIVATOR
http://dfcb.github.com/Responsivator/

Responsivator
こんな風にズラズラと一括表示してくれるので助かります。

使い方はシンプル。ただ表示させたいサイトURLを入れて”Responsivate!”をクリックするだけ。
responsivator1

こちらのブログも勉強になりまする。φ(゚Д゚ )フムフム…
流行りのレスポンシブ・ウェブデザイン! よく使われるデザインパターンを集めてみた!

Infographics

こんにちは、スタッフの長澤です。

最近マーケティング手法として注目されている、インフォグラフィックスをご存知でしょうか。
あまり聞き慣れない言葉ですが広く利用されているデザイン表現の一つで、代表例としては地図記号や電車の路線図等が挙げられます。

何れも一目で視覚的に情報を得ることで、相手に対し簡単で素早い情報発信を可能とするデザイン表現です。
行政等では人口推移データをインフォグラフィックスで作成する等、分かりにくい情報をPRする方法として注目されているようです。

WEBサイトでホームを表す記号として家のマークや、問い合わせのリンクに手紙のマークが多く使用されているのも同様の目的であり、分かりやすいデザインでの表現はユーザーへの思いやりであるのかもしれません。
作り手としても察しと思いやりの気持ちを、デザインで表現できるよう心がけて参ります。

2013年の流行色

こんにちは、スタッフの長澤です。
先日ファッションサイトの話題に触れましたが、2013年春夏のコレクションが発表され来年の流行色が話題に登るようになりました。
流行色はファッションだけでなく、Webサイトはもちろん車や家電、広告や食べ物等にも多く取り入れられています。

今季、秋冬の流行色は黒やダークトーン。(黒・グレー・紺・ボルドー等)
来季春夏は、白やヌードカラーとのこと。(白・ベージュ・生成・ライトグレー等)

昨年頃までは明るい色や楽しい色味に流行が戻りつつありましたが、ニュートラルカラーが根強い人気のようですね。
また、色使いと共に色味は抑えながらも大胆なモチーフを使った模様もトレンドとなるそうです。

Webサイトや販促物、年末年始のギフトや年始状等も流行色を意識してみてはいかがでしょうか。

色使いのお話

こんにちは、すっかり朝晩寒くなってきましたね~。寒さに弱い速水です。
そろそろお歳暮・クリスマスとイベントの多い時期になります。
様々なキャンペーンを企画されてる方もいるのではないでしょうか?

ホームページやPOP、チラシをつくる時、
ここは何色にしよう~~???なんて悩んだりしませんか?

今日はそんなときにちょこっと役立つ(かもしれない)、色についてのお話を。
色について興味のある方なら既にご存知かもしれませんね。

■つくり始める前にまず、どんな色を使うか決めましょう!

 ・一般的な色のイメージ
  一般に、柔らかさや暖かさを感じるのは暖色系、固さ、冷たさを感じるのは寒色系と言われています。

他にもいろいろ。。。
エコロジー、自然派のお店やサービス:緑系、水色、明るい茶色、オレンジ系などでナチュラルで優しいイメージを。

ネイルサロンやガーリーなお店:ピンク・ピンクベージュ系などで可愛らしいイメージを。

食べ物屋さん:赤・オレンジ・黄色などは食欲をそそる色と言われています。

お店やイベント:ファミリーや幅広い年齢層に向けた色=黄緑・黄色・水色・オレンジなどで元気なイメージを。

ヘアサロンなど:ベージュ+濃い茶色・薄いグレーなどは高級感を与える落ち着いた雰囲気を与えてくれます。

これからの季節には、
ワインレッド・ゴールド・白・モスグリーンでちょっぴり大人っぽいクリスマス風、
白・赤・ゴールド + 黒でお正月のおめでたい感じが演出できます。

色によって、それぞれ与えるイメージはこんなに変わってくるんです。
上手にホームページやチラシなどに利用すれば、お客さまに期待通りのイメージを伝えられそうですね!

もちろん例外はありますし、絶対という正解があるわけではありません。
いくらイメージに合った色でも、読みにくければ意味がないですもんね。
ただ、ひとつの基準として頭の片隅に置いておくと、悩んだ時のヒントになりますよ(^^)

それから、使用する色はだいたい5色程度に抑えましょう。
色を使いすぎると、ガチャガチャ騒々しくなって肝心の伝えたい内容が埋もれてしまうかも!?
漠然とたくさんの色を使うと印象が散漫になりがちなのでご注意を。
また、写真やイラストで使われている色から選ぶとバランスが取りやすいですよ。

アクセントとなる色は1,2 色にして、目立たせたい所に絞って少量使えば
すっきりバランスよく注目させることができますよ。

 人の注意を引きつける色って?
  赤・オレンジ・黄などの暖色系。 
  一般に、暖色系や明るい色ほど近づいて見えます。 (例えば、標識などは赤や黄が多いですよね)
  また同系色でも、ベースカラーとの明るさや鮮やかさの差が大きいほど目立ちます。

  反対に、緑・青・紫などの寒色系は後退して見えます。(視力検査でも緑は後ろに見えますね)
  う〜ん不思議ですね〜。

ちょっとした色合いでぐんとイメージが変わるので面白いですね。
それぞれの色の持つイメージを上手に使って、お店やイベントを盛り上げていきましょう!

まるでパラパラ漫画なウェブサイト

こんにちは、スタッフの長澤です。
日産NOTE(ノート)の大変ユニークなサイトを見つけましたのでご紹介いたします。
このサイトを開くと「スクロールでお楽しみ下さい」とのメッセージがあり、下方に小さな四角がたくさん並んでいます。
スクロールをしてみると、パラパラ漫画さながら絵が動いているように見えます。
どんどん続きが見たくなる、とっても楽しいサイトです。
是非ご覧になって体感してみて下さい。

日産NOTEスペシャルサイト

音楽制作の勉強会に参加してきました

学生時代映像制作を学んだ僕ですが、
映像にとってもそして自分にとっても音楽という要素は切っても切り離せないものになっています。

そんな音を自ら作り出せるようになりたいと、普段は独学で音楽を作ったりしているのですが、
プロの方は実際どんなふうに音を構築していくんだろうと気になっていました。

そこで週末「オトトイの学校」という音楽制作が学べる企画に参加してきました。

講師はコーネリアスのサウンド・プログラマ、美島豊明さんと、フリーのプロデューサー、マスヤマコムさん。そしてアーティストのJulie Wataiさんが生徒役で音楽制作のレクチャーを受けるという形式。

この企画自体はすごくおもしろかった。おなじみだと思ってたソフトでも全然知らない機能とかショートカットキーを駆使しためまぐるしい早さの手さばき。

質問コーナーでいろいろミックスのこととか質問されていたけど、結局最後は感覚的な「好み」で判断するらしい。だから手法に正解はないんだそうだ。
その好みをいかに明確に「自分ルール」を設定できるかが曲の完成度に左右する。

音楽以外でもクリエイティブな物って全部そうなってくると思うんだけど、
でもそれってなかなか難しいことだよなあとも思いつつ。

初参加で不安でしたが、
勉強になりました!!

今後簡単な効果音などの作曲も仕事としてできていけたらと思うので、
こういうイベントに参加しつつ日々精進していきたいと思ってます!

日々、勉強!(デザイン編)

ホームページ制作をしている人間として毎日さまざまなホームページをチェックしておりますが、最近は海外サイトもよくみるようにしています。

「赤色を使ったハイクオリティなwebサイト集20」とか
「●●業のオシャレなWebサイト集40」とか

こういったブログでピックアップされるようなサイトは新しい技術はさることながら、
見た目(デザイン)的にも参考になるところが多いです。

海外のサイトではデザインにテクスチャやエフェクトを多用しているサイトも多いのですが、それが汚らしくないんですよね。
細部まで丁寧につくりこんでいるため全体的にも統一感があり、とても美しいサイトが多い気がします。

あまりテクスチャやエフェクトばりばりのホームページは日本では好まれなさそうですが、
デザインの幅を広げるためにも少しずつ取り入れていきたいと思います。
(個性的なホームページを求められる業種もありそうですし)

日々、勉強!