デザイナー向け！iPhone6対応について
（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます 端末 解像度 インチ 書
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
metaタグを追加してFacebookに対応する方法とハマりやすいポイント
Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ！ 「いいね！」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね！」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね！」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って
最速かも?!第15回文化庁メディア芸術祭受賞作品まとめ！
本日、第15回文化庁メディア芸術祭の受賞作品が発表されました！ 受賞作品のPDF そこで、受賞作品の中から、Webで見れるものをまとめて紹介します！ 画像クリックでサイトに飛べます！ アート部門 優秀賞 「particles」 真鍋 大度 / 石橋 素 横幅８メートル、高さ８メートルのLEDを内蔵したボールを使ったインスタレーション。 その製作の様子は、以下の記事で紹介されています。 CBCNET : TOPIC » 真鍋大度＋石橋素 「particles」ができるまで。2年越しで実現した巨大インスタレーションとは？ 「つながる天気」 片山 義幸 2010年8月から2011年7月の天気を写真をつなげ構成された映像とWebコンテンツ。 「BLA BLA」 Vincent MORISSET 画面をクリックして遊べるコンテンツ。6つのチャプターが用意されていて、いろいろと遊べます。 エンターテイ
今熱い！無料オーディオ系サービスのUI 7選＋α
昨日、2010年12月1日、ついに IPサイマルラジオ「radiko」がついに本格サービススタート！ ワッショイワッショーイ！ てなこともあり、無料音声配信コンテンツが今最高にアツイ！と信じて疑わないgunjiです。 映像系サービスが大人気の今、なぜあえて音声だけがイイのか？ それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、 別のことをしながら利用出来るということが挙げられると思います。 まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど 作業用BGMなら仕事の効率がアップすることもありますしね。 移動中も眠りながらも聞いていられますしね。 というわけで今回は国内外の、特にプレイヤー部分のUIが面白い 無料オーディオ系サービスをご紹介したいと思います。 「ながら利用」を加
意外と使える！？Adobe Bridgeでサクサク画像選び！
大量の画像管理にはBridge いきなりですが、お勧めします。 初めまして、新米のKinoです。 みなさんのアプリケーションフォルダにはきっと収まっているはずなのになかなか陽の目を見ない、このソフト。 僕はたくさんの画像を管理するのに重宝しているんです。 今回は、ちょっと覚えるだけで画像管理にBridgeを使いたくなる機能を紹介しますよ〜 サブフォルダ表示＋ラベリングでラクラク画像セレクト！ 複数ファイルの細部を同時に確認！ 画像セレクトをする人にオススメです それではどうぞ〜 Bridgeってそもそもなんですか？ そういえば、知らない人も多いはず。。 BridgeはAdobe社製のマネージメントアプリです。 単体で加工や編集はできませんが、Creative Suitesの全アプリケーションの仲介役として、ファイルの閲覧や管理を行うことができます その性質から単体での販売はしておらず、他ソ
iPhoneデザインで役立ったツールまとめ
未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
【重くても】インタラクティブなPV集（世界編）【気にしない】
海外の最近のインタラクティブなPVって？ 2011年ってもっと未来かと思ってたよ...( ´･‿･｀)こんにちわ。セキネです。 突然ですが、インタラクティブって良いですよね。 つまりユーザーが見て、触って、はじめて真価を発揮するようなコンテンツ達です。 そして昨今は、ミュージックビデオのプロモーションにもそんなインタラクションが組み込まれるようにもなってきました。（日本では去年の暮れにバズった「映し鏡」とかが有名ですね） 今日はそんなPV達をブクマからまとめてみたので放出してみようと思いますでは、続きからどうぞ！三3 Arcade Fire - We Used To Wait 「The Wilderness Downtown」と名付けられたプロジェクト。 Googleストリートビューと連携したPVです。 まず、「SEARCH」のところに自分の生まれた地域を入力します。 すると、PVの1シー
KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
はじめに 自己紹介 はじめまして。Lobiチーム意匠部のばっこです。 カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。 去年の8月頃に社内の受託チームからLobiチームに異動をして、 半年ほどLobiの周辺サービス（Lobi REC SDK、Lobi Play）を担当したり、 少しだけ新規サービス（RANKERS）のお手伝いをしたりしていましたが、 最近、Lobi本体のアプリに携わるようになりました。 世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、 今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。 Lobi（ゲームコミュニティ事業） | 面白法人カヤック Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。 同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテ
いま読むべき、クリエイティブWEBマガジン10選
カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト
誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき！】
突然ですが、ペーパープロトタイプって知ってますか？ 実演ムービー 今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります！ これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。 ピンと来るやつが無かったので、作っちゃいました！ iPhone上で動く フルスクリーン対応（アプリによる） ファイルを開くだけなので、メールで送ったり共有も簡単！ 後からの追加、削除も柔軟に対応可能 デフォルトのUIを使わない場合のテストに真価を発揮します やり方は超簡単なので、今すぐに試すことができますよ！ 簡単なサンプルファイルも最後についてます！ それでは「続き」からどうぞー！ ペーパープロトタイプとは 新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階
【iPhone】デザイナー向けiPhoneアプリ特集！【オススメ】
こんにちは、ウンコの壁紙の携帯をトイレに水没させ、 携帯からiPhoneに変えました。ニシです。 もともと携帯もほとんど使わない私ですが、 iPhoneを一度使ってしまうと、もう手放せないというくらい 便利な機能やアプリが一杯ですね！ 今回は、デザイナー向けのオススメアプリをいくつかご紹介したいと思います。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Color Stream 写真に使われている色をカラーパターンにして保存できるアプリ。 そこから自分で編集する事もできたり、写真にして保存することができます。 ★オススメポイント★(○ゝω・)b⌒☆ 今回のデザインのトーンを、この写真のイメージに近づけたいんだけどな〜 って時におすすめ！ 値段：￥350 アプリのダウンロードはこちら！ what the font 画像から使っているフォントを検索
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
ところでiPadアプリってどうやって作るの？てなったときに読む記事
こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです ePub（電子書籍）の作り方は先月のMDNで特集されていました iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし
最近流行りの「カスタムして楽しむFlashサイト」5選
ちっちゃいころはミニ四駆をカスタムして肉抜きしまくりだったhashimotoです！ そんなカスタム大好きな子供は、大人になってもカスタムが大好き! ということで、Flashでカスタムができるサイトをまとめてみました！ あんなものやこんなものまで自分の好きなようにカスタム出来ちゃいます。 他人と同じものを持っているのがいやだ！って人も、続きでどうぞ！ NIKE ID かなり細かいパーツごとにいじることが出来ます。色はもちろん、材質も選べたりして、さすがの充実度。 主にスニーカーですが、バッグなどもあります。 KOTORI たのしいほうのヘッドフォン ヘッドフォンのサイトです。カラーはもちろん、気の利いた柄も選択できるようになっています。ランダムでカラーを決めてくれる機能もあって、カラーリングが苦手な人や、新鮮な組み合わせを発見したい人にもおすすめです。 ところで、たのしくないほうのヘッドフォ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドット絵描く楽な方法見つけた！気がする