UIはつくらない。ワクワクするストーリーをつくる。（UXのためのUI：ゲーム編）
とりあえずかっこよさげな見出しを考えたところで８割方燃え尽きました。 デザイナーの きのです。 今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。 現在、僕はゲームのUI制作の現場で働いています。*0 半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。 既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。 用語について不慣れなところがあるので、「ああ、あれはきっとあのことだな」みたいな所が散見されると思いますが暖かい目*2でみてくださいませ。 わかりやすいより、ワクワク 今まではわかりやすいが正義！だったのですが、 それだとにっちもさっちもいかなくなってきました。 なぜなら、わかりやすいはゲーム
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
初めての企画書が、最終選考に残った アイデアの出し方
販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！ 本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。 ちなみに出した企画はこちら。 ただいまWeb投票もしているので、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！ まずは販促会議賞ってなに？という人にご説明。 販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され そのどれかに応募するというものです。 企画をパワーポイントにA4サイズ10枚以内で、容量は5MB以内にまとめてくださいというルール。 誰でも参加可能、いくつでも提出OKです。 今回は、全27社から28課題出てました。 1.まずやったこと どうしたら勝てるか研究しました。 販促会議賞は第2回目だったので、1回目の受賞作品をざざっと拝見。 思ったこと 第１回の優勝者、
いま読むべき、クリエイティブWEBマガジン10選
カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
【今も昔も】デザイン系雑誌まとめ【情報源】
納豆はわさび派のくにーです。こんにちは。 みなさん雑誌って読みますか？ 個人的には先日、大好きな雑誌 Lmagazine（休刊）が webにて復活していたのが衝撃でした。 そんなこんなで、 今回はデザイン系雑誌をまとめてみたいと思います。 では、つづきからどうぞー。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた