iPhoneデザインで役立ったツールまとめ
未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ
誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき！】
突然ですが、ペーパープロトタイプって知ってますか？ 実演ムービー 今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります！ これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。 ピンと来るやつが無かったので、作っちゃいました！ iPhone上で動く フルスクリーン対応（アプリによる） ファイルを開くだけなので、メールで送ったり共有も簡単！ 後からの追加、削除も柔軟に対応可能 デフォルトのUIを使わない場合のテストに真価を発揮します やり方は超簡単なので、今すぐに試すことができますよ！ 簡単なサンプルファイルも最後についてます！ それでは「続き」からどうぞー！ ペーパープロトタイプとは 新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階
W3CのHTML5のロゴを表示しました！1分でわかる設置方法！
HTML5使ってます！をロゴで表示しよう！ W3Cは、このロゴは「HTML5、CSS、SVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。 W3C、HTML5ロゴを発表 - ITmedia News デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました！ 公式サイトはこちら。 W3C HTML5 Logo ロゴには二種類あります。 用いている技術をアイコンにして表示するパターンと、静的な画像を アイコンを選ぶパターン 縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
覚えて嬉しい＆使って楽しい！B級ショートカット集【Photoshop版】
Photoshopの秋 時短の秋 ひぶたポケモンが進化しておおひぶたポケモンて。セキネです。 みなさんショートカットは好きですか？ぼくはどっちかというと好きです。 そこで、今回は王道ショートカットではなく、知っておくと実は使える／知っていても使うまでいかない／ボタン押した方が早いじゃないかというようなちょっとB級臭のするショートカットや小ネタを紹介します。ちなみにB級かそうでないかは独断と偏見で選んでます。そのへんよろしくお願いします。 目指せ、カンバス以外非表示系男子。 ※Macキーボードでの記載となります。Windowsの方はCommand→Ctrl／option→altへと脳内変換をお願いします。 ※OSやバージョン違いによって差異があるかもしれません。 ツール まずは意外と使いこなせていない人が多いツール切り替えショートカット。 ツールパレットまで移動する時間を省ければ全体で大きな
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
Blogとユーザビリティと私
コンセプトなきUIにユーザビリティは宿らず( ＾ω＾)9 こんにちは。 セレビィをもらいに映画館までいこうか、まだ迷っているセキネです 今回はブログリニューアルに関しての"ユーザビリティ：いかに今回のUIに至ったか"についてです。 前回のコンセプトの記事とセットということで。 2投稿連続でブログリニューアルに関する概念的な話しになってしまい恐縮ですが、今しか出せない旬ものという事で。 ではまずはベタにヤコブ・ニールセン氏の 「ブログのユーザビリティ：デザインの間違いトップ 10」でも振り返ってみましょうか。 ではどうぞ( ＾ω＾)y 1. 著者紹介の欠落 2. 著者写真の欠落 3. 不明確な記事タイトル 4. リンク先が記述と異なる 5. 過去の名作を埋もれさせてしまう 6. カレンダーだけが唯一のナビゲーション 7. イレギュラーな更新頻度 8. 話題の多様性 9. 将来の上司が読むこと
コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ～～～ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
イラレを極めたい！！その２ えっ、このタイミングでメニューが差し替え！？
全ページデザイン修正しなきゃ... と、ならないために共通部分は外部ファイル化してイラレに配置しておくのが無難です。 今回はこの配置を使って効率よくデザインする方法です。 一般的なwebデザインの構造はヘッダー、ボディ（コンテンツ）、フッターとなっています。ヘッダー、フッターは共通のデザインになります。この共通部分を外部ファイル化しておきイラレに配置します。 イラレはjpg,gifなどはもちろんイラレデータ(.ai)も配置できるので、ヘッダーやフッターを.aiファイルで作成しておけば、突然デザイン変更になっても簡単に対応できます。 配置の仕方は、 ファイル＞配置 を選択するか、開いているイラレファイルに配置したいファイルを直接ドロップすると配置できます。 イラレにイラレファイルを配置する場合、配置されるファイルは保存時にオプションのPDF互換ファイルを作成 にチェックを入れて保存しないと配
目が三倍になる！！！小悪魔age嬢メイクのPhotoshopチュートリアル | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
メイクはベースが肝心！ 1)肌の赤みや影を消して、陶器のような肌に。 スタンプツールで肌を丁寧に補正＆トーンカーブでコントラストをあげ、 美白効果を演出します。 2)髪色を明るく [クイック選択ツール]などを使い、髪の毛の部分を選択します。 その際[選択範囲]→[選択範囲の拡張]で少し大きめに選択、 コピーしてレイヤーを複製します。 複製したレイヤーを [カラーレベル:60 30 -50]、 [モード：比較(明)]に設定します。 3)髪にツヤをつける ペンツールでツヤを出したい範囲を囲み、 選択範囲を作成（レイヤーサムネイルをctrl押しながらクリック）します。 選択範囲をぼかして（ここでは3px）、 トーンカーブでコントラストをつけ、[モード：輝度]に設定します。 参考：Creating shining hair 次はいよいよアイメイクです！ 4)つけまつげを装備 アゲ嬢にはかかせない、
新人デザイナーがハマったコーディングの勘違い
はじめまして。新人MEの渕上伸吾です。 カヤックのME は、uemura率いる意匠部ME課（メカ）に所属しています。 ME課のお仕事は、コーディングを覚えたい新人デザイナーのサポートも担っているのですが、 そんななかで出会った、新人にありがちな勘違いネタについてエントリーを書いてみたいと思います。 これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください ♪ 1. h1タグは太字にするためのなにかだと勘違い 同様にstrongタグも太字にするためのタグだと勘違いされる傾向があるみたいです。 h1タグのhはHeading（見出し）の意味。 strongタグは強調する意味。 情報の意味に添うようにマークアップしよう！ 2. pタグはテキストを中央寄せにするためにある、と勘違い pタグのpは Paragraph（段落）の意味。 中央寄せにする、しないに関わらず文章の段落はpタグで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のミサワがCSS3の勉強に最適と話題に