タグ

2013年2月18日のブックマーク (15件)

  • 初めてでも大丈夫!今さら聞けないワイヤーフレームの描き方のコツ | KAYAC Director's Blog

    おヒマな方へ 初めてでも大丈夫!今さら聞けないワイヤーフレームの描き方のコツ はじめまして!鎌倉でソーシャルゲームを制作しているとうせです。そろそろ入社2年目に突入します。 入社直後の仕事はモバイルソーシャルゲームの新規開発で、「100枚超のページから構成されるサイトマップと、それに紐づいたワイヤーフレームを全部描くこと」でした。 その際に気を付けていたことを少し公開したいと思います! 下準備:ネタを集めよう! いちユーザとしての視点を思い返せるように準備する という点に注意するだけで、ワイヤーフレームを描くときのネタは集まってきます。 私自身は、モバイルサイトのワイヤーフレームを描くことが多いので、携帯電話の「画面メモ」を使ってメモをよく取っていました。 最近はようやくスマートフォンに鞍替えしたので、スクリーンショットをばしばしとっています。 スクリーンショットを撮る目的 自分のアプリ

  • ホームページの作り方 トップページの作り方1.ホームページの構成図を作る

    1.ホームページの構成図を作る 最も重要な構成図づくり ホームページを作る際、最も重要になるのがこの構成図の作成という準備です。 手書きでももちろん構いませんし、エクセルやパワーポイントなどで構成図を作成するなど、 自分の管理しやすい方法で作成します。 下層のページの階層はなるべく浅くする ホームページにおいて最も重要なことは、エンドユーザーにとって「わかりやすい」という事です。 常にエンドユーザーの立場になってホームページ作りを考えます。 特にページの階層はトップページを最上位と考えると、2階層ですべて作れる事が理想です。 ページ数が2~30ページ以上のボリュームがある場合は、3階層にするしかないですが、 分かりやすいホームページの階層の深さとしては3階層が限界です。 ページの優劣を考える ホームページを作る際、各ページでどのページが最も重要なのかをイメージしてください。 最も見せたい内

  • 2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog

    こんにちは! 先月の頭に書いた記事「【2013年度版】今年流行る!7つのUIデザイントレンドまとめ」が 今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る!7つのUIデザイントレンドまとめ」でご紹介した「メトロUI(フラットデザイン)」にフォーカスした記事です。 (下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です) 最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレ

    2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog
  • Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜

    デブサミ2013(Developers Summit 2013)Action! 1日目のデザインセッション「デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜」の発表資料(2013年2月14日) -------------------------------------------------- 途中、時間がなくて話せなかったところも入っています(そこがかなりいい話だったりする)ので、やっぱりここも実際に聞きたい!という方はまたどこかで呼んでくださいm(_ _)m よろしくお願いします。Read less

    Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
  • WordPressアフィリエイトで稼ぐための「収入5倍テクニック」まとめ【稼ぎ方】

    ブログアフィリエイトの収益が増える5つのテクニック 広告は「クリック率が最大になる配置」にする! GoogleAdsenseを貼っているアフィリエイターの人も多いと思いますが、アドセンスはクリック率で何倍も成果が変わってきます。 クリック率の平均ってどれくらいなの?と疑問に思う人も多いと思います。 大体の場合は、クリック率が0.5%以下ならクリック率がかなり低いです。 しかし、このクリック率。 実は広告位置をちょこっと変えるだけで1%までなら上げることが可能です。 おそらくほとんどの人は以下のどこかにアドセンス広告を配置していると思います。 タイトルロゴの横 サイドバー 記事の前 記事の中間 記事の直下 基的にタイトルロゴ近くとサイドバーの下部分はクリック率がかなり低いです。 多くのブログに対して効果的な掲載場所として以下の3カ所をおすすめします。 記事の前 or 中間に1つ入れる(46

    WordPressアフィリエイトで稼ぐための「収入5倍テクニック」まとめ【稼ぎ方】
  • UIトレンドの研究に!海外のユニークなUIのWebデザイン

    海外のユニークなWebデザイン】 Webデザイ... / 【タブレットに最適化したUI】タブレットでの閲覧... / こちらもタブレットに最適化しているWebサイト。...他...全11件 【海外のユニークなWebデザインWebデザイン界隈では毎年、実験的なユニークなUIのWebサイトが次々と現れ、その中のいくつかが「トレンド」として爆発的に広まっていく傾向にあります。グリッドレイアウトやパララックス、レスポンシブWebデザインなどなど。それらはすべて海外で生まれ日にやってくるのです。 \n \n 次のトレンドを見極めるためには、海外のユニークなWebサイトを研究することが一番の近道です。ここでは、最近気になるユニークなUIのWebサイトをご紹介いたします。

    UIトレンドの研究に!海外のユニークなUIのWebデザイン
  • スマートフォン対応でよく使うhtml、css、javascriptのまとめ

    スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtmlcssjavascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon

  • 商用利用も可能の、フラットなデザインのアイコンを大量に配布するWebサイト・Icons DB

    フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い

    商用利用も可能の、フラットなデザインのアイコンを大量に配布するWebサイト・Icons DB
  • SEO Japan - 優れた文章を書くための11の賢いヒント

    SEO屋の私がいうのもなんですが、サイトのコンバージョンを最も劇的に改善する手法といえばLPO。LPOサービスを自ら始めた位に惚れ込んでいるウェブマーケティング手法ですが、名前や内容は知っていても意外とちゃんと実施したことがないサイトやウェブマーケッターが未だに多すぎることに嘆いている最近です。多変量テストや行動ターゲティングとはいわずとも、A/Bテスト位は定期的にやっていきましょうよ、、ということで、今回は米国カリスマウェブマーケッターのニール・パテル氏が自らの経験を元にA/Bテストで実施するべき項目を11まとめた面白くてためになる記事を。 — SEO Japan 既存のトラフィックからもっとお金を絞り取りたいのなら、A/Bテストの実施を開始する必要がある。少なくとも毎月10,000人のビジターがいるなら、毎月でないにしろふた月に一度は一つ新しいA/Bテストを実施することを検討すべきだ。

    SEO Japan - 優れた文章を書くための11の賢いヒント
  • はがき(サイズ・寸法・種類)-印刷物の規格について

    はがきは正式には第二種郵便物と呼ばれます。 郵政公社が発行する送料込みのはがきを「郵便はがき」、送料分の切手を貼って投函するはがきを「私製はがき」といいます。 ■はがきのサイズ・寸法 通常はがき:50円 郵便はがき(100×148mm) 私製はがき(短辺90〜107mm×長辺140〜154mm) 往復はがき:100円 官製(200×148mm二つ折り) 大判はがき:80円 封書の定形郵便物の最大サイズ(120×235mm)まで 郵便はがきの種類(郵政公社が発行するはがき) ■絵入りはがき 各地の代表的な風景・風物のほか、最近では、ディズニーキャラクター、ハローキティ、ポケモンやドラえもんといった人気キャラクターもあります。 ■エコーはがき はがきの一部に広告が印刷されていて、その広告料で1枚あたり5円安い45円のはがき。5円お徳な「エコノミー」と、広告効果が「山びこ」の

  • Photoshopで手描き風の線をつくる方法

    Photoshopで手描き風の線を簡単につくる方法です。可変・色変えできる方法を模索していたところ、今のところこの方法が手軽で一番良いなと思いました。 ランダムな線の画像をパターンに登録する 以下の画像をダウンロードします。 または、自作で好みの線で描いても良いと思います。私はマウスでグリグリと描いたのですが、線は1px、色は#333333くらいにしました。 自作の画像をパターン登録するときは、背景透過にするのをお忘れなく。 ちなみにパターン登録は、「編集」→「パターン定義」でできます。 シェイプで矩形を描き、レイヤースタイルで色をつける シェイプで矩形を描き、塗りを0%にします。 レイヤースタイルでパターンオーバーレイにチェックを入れ、上記の画像を選択します。 色をつける場合は、カラーオーバーレイで、描画モードを「オーバーレイ」にし、色を選択します。 線の幅は1px 〜 5pxが良い感じ

    Photoshopで手描き風の線をつくる方法
  • Google アナリティクスでよく聞かれる事に答えるためのオススメサイト8つ+記事20本 - Real Analytics (リアルアナリティクス)

    Googleアナリティクスに関する質問を時々聞かれます。仕様であったり、実装であったり、機能であったりとその内容は多岐にわたります。そんな時には公式サイトのヘルプや自分のブログ記事を案内したりしているのですが、都度都度それを探して返信するのが大変なので(しかも、毎回どのページを紹介したか忘れてしまうので)、一つ記事を書くことにしました。読者の皆様にも参考になるのでは?ということで、よろしければ御覧くださいorブックマークしてくださいませ。数ヶ月に1回くらいアップデートしようと思います。 なお、記事の内容に関しては事前に確認をしていますが、 1)現時点でその内容や仕様が変わっている可能性があります 2)(また、公式サイトと言えど)書かれていることが、必ずしも正しいとは限りません 3)また、それらの内容の成否について私からお答えすることもできません という事だけ、了承いただければ! オススメの

    Google アナリティクスでよく聞かれる事に答えるためのオススメサイト8つ+記事20本 - Real Analytics (リアルアナリティクス)
  • Hamlで開発効率アップ|Sublime text 2でビルドしてみました。 | DevelopersIO

    先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは? Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは? XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ??ってなるかと思います。 日Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述

    Hamlで開発効率アップ|Sublime text 2でビルドしてみました。 | DevelopersIO
  • すごい得した!便利な「無料」WEBサービスと知識まとめ

    作成:2013/02/18 更新:2013/05/14 Tool > Webサービス 生活や暮らしをもっと便利にしたい 友達、知人が困っていたときに 「それなら便利なサービスあるよ」 とサラッと伝えたい。 今回は日常で使う、ちょっとした無料サービスや知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.グルメ 2.レジャー / 旅行 3.生活 / 節約 4.音楽 5.物 / 売買 6.暮らし 7.ビジネス 8.Google 1.グルメ お土産に迷った時の参考に 47都道府県手土産リスト - GOURMET - X BRAND プロのシェフによる家庭料理レシピ集 プロから学ぶ簡単家庭料理 シェフごはん ラーメン屋に特化した口コミサイト 全国ラーメンデータベース 自分も他人も行ってるお店を共有する Rettyグルメ[レッティ] お店に行きたく

    すごい得した!便利な「無料」WEBサービスと知識まとめ
  • iCloud に iPhone のバックアップを作成する方法。大切なデータを確実にバックアップしましょう。 | AppBank

    大切なiPhoneのバックアップを iCloud 上に作成する方法を解説いたします。 従来は、PC/Mac上にしかiPhoneのバックアップを作成することができませんでした。iCloud の登場によりクラウド上にバックアップを作成できるようになりました。 この記事では、iCloud 上にバックアップを作成するメリット、バックアップの方法、バックアップ項目の設定、追加スペースの購入などについて解説いたします。 何かと便利そうな iCloud でのバックアップですが注意しておかなければいけないことがいくつかあります。注意点についても詳しく解説いたします。 *ここで作成したバックアップデータからの復元は別記事での解説となります。10/20に公開されますのでお楽しみに! →iCloud 上のバックアップから iPhone を復元する方法。(ほぼ)PC/Macに接続する必要はありません!

    iCloud に iPhone のバックアップを作成する方法。大切なデータを確実にバックアップしましょう。 | AppBank