タグ

ブックマーク / design.kayac.com (6)

  • iPhoneデザインで役立ったツールまとめ

    未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ

  • 地獄のミサワがCSS3の勉強に最適と話題に

    CSS3に興味はあるけど、きっかけが無いなあと思っている方へ こんにちわ、jsdo.it担当のふちがみです。 最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。 「それ2年ぐらい前に見たわー」という方も続きからどうぞ! 一瞬でわかるまとめ フロントエンジニアたちが地獄のミサワに夢中 - togetter canvasで描かれたミサワ

  • W3CのHTML5のロゴを表示しました!1分でわかる設置方法!

    HTML5使ってます!をロゴで表示しよう! W3Cは、このロゴは「HTML5、CSSSVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。 W3C、HTML5ロゴを発表 - ITmedia News デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました! 公式サイトはこちら。 W3C HTML5 Logo ロゴには二種類あります。 用いている技術をアイコンにして表示するパターンと、静的な画像を アイコンを選ぶパターン 縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表

  • 誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき!】

    突然ですが、ペーパープロトタイプって知ってますか? 実演ムービー 今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります! これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。 ピンと来るやつが無かったので、作っちゃいました! iPhone上で動く フルスクリーン対応(アプリによる) ファイルを開くだけなので、メールで送ったり共有も簡単! 後からの追加、削除も柔軟に対応可能 デフォルトのUIを使わない場合のテストに真価を発揮します やり方は超簡単なので、今すぐに試すことができますよ! 簡単なサンプルファイルも最後についてます! それでは「続き」からどうぞー! ペーパープロトタイプとは 新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階

  • 今年ありがとうを言いたい『Google Chromeエクステンション』10選

    連載企画「今年ありがとうを言いたい○○」 前回書いた記事が予想外の評判で驚いています。 読んでいただいた方ありがとうございます! さて、自分がありがとうを言いたい物ですが、Google Chromeのエクステンションに対して「ありがとう!」と言いたいです。 という訳で、感謝の気持ちを込めて、自分が使っているGoogle Chromeのエクステンション10個を紹介していきたいと思います。 Awesome Screenshot Awesome Screenshot: キャプチャーと注釈 これは仕事でというよりも、自分が運営している4sqWalkerというブログで記事を書く時に役立っています。 選択範囲や1ページ全体をスクリーンショットとして保存出来るだけでなく、注目してほしい所には丸で囲ったり文字を入れたりする事が出来るのが便利です。 これを入れてからPhotoshopを立ち上げる回数が減りま

  • HTML5でつまずきやすいasideとsectionの使い方

    HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします! 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を

  • 1