「ヒューリスティックマークアップ」から始めるUXデザイン
はじめに 自己紹介 はじめまして。Lobiチーム意匠部のばっこです。 カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。 去年の8月頃に社内の受託チームからLobiチームに異動をして、 半年ほどLobiの周辺サービス（Lobi REC SDK、Lobi Play）を担当したり、 少しだけ新規サービス（RANKERS）のお手伝いをしたりしていましたが、 最近、Lobi本体のアプリに携わるようになりました。 世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、 今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。 Lobi（ゲームコミュニティ事業） | 面白法人カヤック Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。 同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテ
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
23人のカヤック社員がおすすめする「つくるときに役立つ三種の神器」まとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
7月7日に行われる面白法人カヤックのイベントである「777☆カヤックフェスティバル」に向けて、 6月6日〜7月6日までの間、 ディレクター、エンジニア、フロントエンジニア、デザイナー、 全職能のブログを、同じテーマの記事でつなぐ「777ブログウェイ」を実施していました。 23人のカヤック社員が、「つくるための3種の神器」をテーマにブログを書きました。 そのまとめ記事になります。 デザイナーまとめ 新しいPCに入れる基本ソフト3つ：Windows版 新卒Webデザイナーが考える「五月病」を脱却する方法 Workflow para reducir el tamaño de tus assets デザインするための三種のリファレンス グラフィッカーの三種の神器！？ 思わず絵が描きたくなる（！？）三種の神器 ディレクターまとめ もっと知りたい！「好奇心」をつくる３つの視点とサービスを紹介します
インターネットでものづくりするときに役立つサイトまとめ
先日、東京学生広告研究団体連盟の総会にて、 「インターネットでつくる人を増やす」というテーマでお話させていただきました！ その時に紹介したサービスをまとめます。 この記事のターゲットは、インターネットでまだ作ったことがない人。 興味があってこれから始めよう！と思っている人向けです。 ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。 アイデア・インスピレーションをストックしよう まずは、アイデアのストックやインスピレーションを高めるサービスを紹介します。 EVERNOTE 簡単なメモから、写真や動画まで記憶し、整理整頓ができるサービスです。 tumblr オンラインでできるスクラップブック。Web上の記事や画像・映像などを簡単にストックできます。 また他のユーザーの投稿もストックできるので、面白いユーザーをフォローするのがオススメです。 Pinterest 画像を貼りつけて共有
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
metaタグを追加してFacebookに対応する方法とハマりやすいポイント
Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ！ 「いいね！」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね！」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね！」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って
ユーザーを逃さない！海外Webアプリの入力フォームいろいろ
このフォームのポイント！ 上部のボックスでエラー表示 入力時にリアルタイムのエラー判定 それぞれのフォーム下部にエラー文言 項目名を赤く目立たせる
初めての企画書が、最終選考に残った アイデアの出し方
販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！ 本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。 ちなみに出した企画はこちら。 ただいまWeb投票もしているので、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！ まずは販促会議賞ってなに？という人にご説明。 販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され そのどれかに応募するというものです。 企画をパワーポイントにA4サイズ10枚以内で、容量は5MB以内にまとめてくださいというルール。 誰でも参加可能、いくつでも提出OKです。 今回は、全27社から28課題出てました。 1.まずやったこと どうしたら勝てるか研究しました。 販促会議賞は第2回目だったので、1回目の受賞作品をざざっと拝見。 思ったこと 第１回の優勝者、
大量の画像をサクサク処理するためのエントリまとめ
大量の画像を書き出す場面に遭遇して( ꒪⌓꒪)ってなるのはWEB屋の宿命のようなものですが そんな書き出しを一瞬でもはやくやっつけたい。 むしろやりたくない。なにもかも機械に任せたい。 機械がやってくれてる間にはとサブレ食いながら優雅にFaceBookをたしなみたい。 そんなめんどくさ効率を追求するために調べたまとめです。 なにかお役に立つものがみつかればうれしいです。 書き出しをとにかく速くしたい スライスチップ作成パレット スライスチップ作成パネル-CS4用 | Dearps スライスがFireworksみたいになるエクステンション。ほんとうに助かってます。 ワンクリックでスライスができるのでガイドつくってちまちまやるより数倍速いです。 Flash Helper Scripts Flash Helper Scripts：JavaScriptで「Flash＋Photoshop」連携をパワ
いま読むべき、クリエイティブWEBマガジン10選
カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト
購買意欲を刺激する！印象的なHTMLメルマガ10選
マラソンに夢中！ nonakaです。 毎週通販サイトのhtmlメルマガを作っているので、他の通販サイトのメルマガも多数購読してます。 今回は、通販サイトのhtmlメルマガを集めてみました。 通販サイト html形式メルマガまとめ セレクトショップ：BEYES（バイズ） 【メルマガの横幅】600px。 【構成】バイヤーからの一押しアイテム、毎週更新される特集ページバナー、新商品情報、ファッションコラムなど。その他、購入者限定のメルマガも配信してます！ 靴下専門店：Tabio（タビオ） 【メルマガの横幅】713px。 実際のメルマガ用のhtml 【構成】雑誌掲載商品、季節のリコメンド、ランキングなど要素が豊富！ 無印良品 【メルマガの横幅】569px。 実際のメルマガ用のhtml 【構成】バナーが縦に並ぶ構成が多い。 facebookやtwitterの案内もさりげなくヘッダーに入っている。 z
Facebookファンページ、デザインのまとめ！
11月ですね！今年も残り2ヶ月！ 本社のある鎌倉は紅葉の季節にさしかかり、いい景色に元気をもらっているbarimiです！ Facebookって流行って…る？！ ってことで、私も先月からぼちぼち使いはじめました！ …が、ファンページってどうやってつくるの？とかデザインってどんなのがあるの？ などなど、まだまだ分からないことが沢山。 そこで今回は、デザインがかわいいファンページや、デザインギャラリーサイトをご紹介したいと思います！ いいね！ボタンを押させたい！ってときに一工夫しているファンページ ってことで、印象的なウェルカムページ。 Redbull まずはRedBull。かわいいグラフィックで思わず押したくなります。 Teesey Tees こちらは、いいね！を押すと、、、、(押してみましょう！) Desigual オーソドックスな画面ですが、独特の浮遊感のある色合いが綺麗ですね。 ファンに
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
ところでiPadアプリってどうやって作るの？てなったときに読む記事
こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです ePub（電子書籍）の作り方は先月のMDNで特集されていました iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
デザイナー必見！ポータルのポータル【モバイルデバイス編】
歴代人気記事でも上位の ポータルのポータル。 今回は、iPad・iPhone・携帯サイトなど モバイルデバイスのデザインギャラリーを集めてみました！ それでは続きからどうぞ。 iPad・iPhone Landing Pad ー an iPad App Gallery 綺麗なiPadアプリがたくさん掲載されています。 iOSpirations iPad/iPhoneのアプリやサイトデザインが紹介されています。 ishowcase 国内のiPhone / iPad最適化対応サイトが掲載されています。 iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト 国内/海外のiPhoneサイトがたくさん掲載されています。 mobile AWESOMENESS 綺麗なモバイルデザインがたくさん。 Web Design Inspiration for the iPhone iPhoneに
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方