19

2015

AWA Meaningful Animations

元ソース http://ameblo.jp/ca-1pixel/entry-12091699096.htmlこんにちは。AWAでプロダクトマネージャー兼インタラクティブアニメーターをやっている冨樫です。今回はAWAのインタラクションについて書いていこうと思います。AWAインタラクションの軸◆ 現実世界の動きとアニメーションの間にギャップを作らない現実世界では「後ろの模様の動きが遅いから、あれは遠くにあるものだ」なんて意識して理解してる人はいないと思います。...

09

2015

バナー作成してみよう

バナーを作る上での参考になりそうな記事たちです。■新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ■「45分」で作れる!高品質バナーの作り方!■【WEBバナー】これで作れる!?広告業界人のためのWEBバナー作成講座~Photoshop編~■勝てるバナーレイアウト20選!レイアウトに悩んだ時の虎の巻■デザイナー視点で見る!イケてるバナーとトホホなバナー~イケてるバナー編~■BANNER LINKS...

19

2015

calltoideaでデザインを検索しよう

calltoideaはパーツごとに検索が可能なギャラリーサイトです。あくまでも参考なので、はやりのパクリはダメよwhttp://www.calltoidea.com/index.php...

16

2015

目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス

あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。Steal These 50 Branding K...

01

2015

簡単にWebGLを作成する方法

今まで悩み続けていたWebGLですが、物凄い簡単ん方法が見つかりました。本を買う必要なかったのでは!?Blenderから作成するアドオンblend4webを使用する方法です。ちょうど6/30に更新が掛かり、15.06がリリースされました。これさえあれば、いきなりBlenderからHTMLに書き出せます。公式サイト https://www.blend4web.com/en/無料と有料があるようですね。こちらで表示は難なく出来そうですが、ギミックの仕込みは書かないといけ...

01

2015

ノンデザイナーでも押さえておきたい!デザインの原理原則がわかる8つの記事

これは勉強しておいた方が良い内容なのでメモメモ。-----------------------デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。企画書の作成、簡単なモックアッ...

09

2014

いまWeb現場で使われている「jQuery」デザイン メソッド

 jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。本書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法ま...

07

2014

女のホンネひしめく世界のつくりかただそうです

GIRL'S TALKとは女性限定完全匿名掲示板サービス「GIRL'S TALK」は恋愛、ナイトライフ、ココロやカラダの悩み...「誰かに話したい、けど話せない」そんな悩みを抱える女性達のために生まれたサービスです。ということで、早速詳しいお話に入ります。ユーザーだけを見すぎないことサービスのターゲットをしぼりこみ、いざ、デザインをする段階で目を向けるのはどこなのか。GIRL'S TALKのメインターゲットは、20代後半~30代前半の女...

06

2014

スマホデザインにおける、忘れがちな5つのルール

1. 圧倒的なユーザー目線画面の構成を検討する際、「ここにあったら気付くだろう」や、「ここまでやらなくても伝わるだろう」という、根拠の無いサービス都合の判断では、実際の所ユーザーは思ったように使ってくれません。一般的に考えて「なにが普通か」ではなく、ユーザー的に考えて「なにが自然か」を意識する事がとても重要です。「ユーザー目線」というフレーズが一人歩きしがちですが、実際の所、現場のデザイナー自身がユ...

06

2014

CSS3アニメーションで心地良いモーションを作る

今回は、最近のSNSアプリでよく見ることが出来る、いいねボタンなどのアニメーションについて、CSS3アニメーションを用いて心地良い動きを実現していく方法を紹介します。技術としては目新しくないかもしれませんが、非常に短い時間の中でアニメーションのストーリーを組み立てたり、アニメーションを考える上で少しでも参考になればと思います。ポヨン!プルン!という動き今回は下記のイメージのような2つの動きについて書いてい...

06

2014

体験について考えるとは

テクノロジー抜きでデザインすることはナンセンスな時代になりました。しかし、それはテクノロジー中心に設計しようという意味ではありません。 UX を意識したデザインプロセスで構築をする前に、体験に関わる幾つかの疑問について考えてみる必要はあると感じています。UXでは見えてこない側面ひとつの考え方として UX (User Experience) は今日のデザインでは無視をすることが出来ません。デザイナーだけでなく、今やビジネスシー...

06

2014

UXの下準備に使える3要素

人、文脈、製品・システムの3要素に注目することで、UX の『何』を理解するヒントを得ることが出来ます。やることが広く、ツールや方法論を活用しても照準を見失いやすいからこそ、どこを選択するかの能力が必要になります。利用者によりよい体験を提供するために設計をする・・・といっても膨大な課題です。どれに手を付け始めたら良いか分かりませんし、何にフォーカスして考えたら良いのかもハッキリしません。ペルソナ、シナ...

06

2014

文脈を理解したWebコミュニケーションデザイン

Web サイトのコンテンツの文脈だけではなく利用者のコンテキストを理解することで、Web サイトの情報と見せ方を変化させることが可能になります。パッケージングを最適化させるということは文脈の理解から始まります。パッケージングの違いは文脈の違い前回の記事「あなたも私もメディアカンパニー」で、コンテンツを制作するだけでなくメディアカンパニーのように配信の仕方にも工夫をしなければならないという話をしました。コン...

06

2014

インタラクションから生まれる3種類の体験

体験は大きく3つに分類することができます。今その瞬間を指す「体験」、名前を付けることができる「ひとつの体験」、誰かと一緒にする「共同体験」。この3つがどのように関わっているかを理解することで体験をより細分化して理解できるようになります。以前「ところで体験ってなんですか?」という記事で、体験は2つの自己によって形成されていると解説しました。行動経済学者ダニエル・カーネマンによると、今この瞬間を経験す...

06

2014

インターフェイスとしてテキストをみたときに考慮すること

テキストに意味をもたせるには「タイポグラフィ」「構造・配置」「色彩・形状」が欠かせませんが、肝心のテキストがきちんと考慮されていない状態だと見た目が変わっても改善されてない場合があります。サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェ...

06

2014

Webデザインがつまらなく見えてしまう理由

魅力が伝え難いWebデザインWebデザインを説明するのは非常にやっかいです。このサイトでも何度も取り上げては書き続けていることですが、上手く説明しきれていない部分は少なくありません。最近よく感じることが Web サイトの魅力を伝えるのは難しいということと、そもそも「魅力・良さ」という部分も人それぞれであるという点です。いろいろな意味が含まれていると思いますが、Web における「魅力・良さ」は、見た目や動きに集約...

06

2014

良いWebサイトのなかにある静と動

シンプルな言葉のなかにあるニュアンスの違い「なぜ、Web サイトが必要なのか?」とてもシンプルな質問ですが、回答は様々です。「利用者にとって良いコンテンツや体験を提供したいから」という回答をする人もいるでしょう。しかし、この模範解答のような言葉でさえ、人によってニュアンスが異なります。特に、マーケッター寄りの人と人間中心設計を実践している人では『良い Web サイト』の捉え方が大きく異なります。マーケッタ...

06

2014

とにかくUXを学べ!

UXデザインのプロセスを進める上で、チームメンバーで最終ゴールのイメージを共有することが不可欠です。そこで用いると有用なのが、「定義書」や「ステートメント」といった、ゴールを明文化した資料です。UXデザイン定義書(gengesix)【UXデザイン定義書】UXデザインを共有するためのテンプレート – UXデザイン定義書 | ジェネシックスブログ Shlideshare from hyun 【UXデザイン定義書テンプレート 2012年7月版】 Shlides...

06

2014

ペルソナって何?

ペルソナって何?ペルソナとは、ユーザーの行動パターンを調べ、そのデータを統合して作り上げたユーザーを代表する仮想の人物のことです。一体のペルソナの背後には、多くの人間が存在します。参考:ペルソナマーケティングとは?-ペルソナ1. | マーケティングリサーチの専門会社、KFSペルソナを活用したデザインアプローチを「ペルソナ手法」(正しくは「ゴールダイレクトデザイン」)と呼びます。Alan Cooperが『コンピュータは...

02

2014

デザインは8の倍数でできている

今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して「最適な値は存在するのか?」について考えてみたいと思います。少々長いですが、お付き合いのほどよろしくお願いします。目次--------------------------------------------------【第1部】8の倍数【第2部】iPhoneのUI【第3部】グリッドデザイン【第4部】画面解像度のトレンド【第5部】黄金比とフィボナッチ数列【第6部】バナーガイドラインを...

02

2014

CSS3でつくるキャラアニメーション

<span style="font-size:x-large;">チュートリアルガールのアニメーション</span>今回ご紹介するのは、現在チュートリアルで登場しているガールです。このガールは、CSS3アニメーションを使用して動かしています。<a href="http://nlst1.blog.fc2.com/img/o0338060012947404209.png/" target="_blank"><img src="http://blog-imgs-48.fc2.com/n/l/s/nlst1/o0338060012947404209.png" alt="o0338060012947404209.png" border...

02

2014

コンテンツ管理で解決しなければならない課題

コンテンツ管理というと、真っ先に CMS (コンテンツ管理システム)を連想する方はいると思います。どのシステムを導入するかを考える前に、そもそも Web におけるコンテンツ管理とは何かを理解しておく必要があります。理解を深めることで、クライアントが抱えている課題と解決のための模索がしやすくなります。コンテンツを管理するということは、システムの中にデータを保管し、様々な形式に書き出すことだけに留まりせん。多く...

02

2014

コンテンツ評価をする前にしておきたい質問

質問で変わる調査の仕方Web解析は、コンテンツの質を評価するために欠かすことができません。しかし、いきなりデータの海へ飛び込んでも、目的を見失うことがあります。手軽に膨大なデータへアクセスできるようになった今だからこそ、データに触れる前に何を見るのかを明確にしておく必要があります。コンテンツの評価とは、大まかに言うと「コンテンツがうまく機能しているかどうか」を調べることです。データを通して、人々はど...

02

2014

コンテンツから先に考えなければデザインすらできない理由

ワイヤーフレームの間違った使い方たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではう...

02

2014

Webコンテンツを理解できる人になろう

Webプロフェッショナルだからできるコンテンツの検査 from Yasuhisa Hasegawa http://www.yasuhisa.com/could/article/understanding-webcontent/「コンテンツ」と言うけどコンテンツとはなにか?と尋ねられたら「訪問者・利用者のためになる情報」と応える方がいると思います。確かに利用者のためでなければいけないわけですが、立場によってニュアンスが異なる場合があります。PR やプロモーションでは、自分たちをアピールする...