タグ

ブックマーク / webnaut.jp (5)

  • デザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks

    デザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。 そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。 今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思

    デザイン通りに実装するだけじゃない!フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks
  • 縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks

    モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます! 明けましておめでとうございます。年もWebNAUTをよろしくお願い致します。私の新年1目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター: ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか? デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

    縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
  • スクラップブック界の神アプリ!?INBOARDの使い方 【画像収集ツール】 | WebNAUT

    こんにちは!お気に入りの画像はざっくり整理派のデザイナーのタカハマです。皆さん、アイデアの引き出しとなるスクラップブック作りはどうしていますか?アナログな切り抜き収集?Evernoteでとりあえず保存?それともデスクトップに散らばったまま? 私は長らくPinterest派でしたが、最近「INBOARD」に浮気しちゃいました! INBOARDって何? ラトビアのDRAUGIEM GROUP社が開発している「簡単にスクリーンショット収集が楽しめるMacアプリ」で、2013年11月28日現在はベータ版が公開されています。(対応OSはMac OS X 10.7.5以上) ここ最近使い始めたところ、操作感が気に入ったので使い方を簡単に紹介させて頂きます!(ユーザーが増えてEvernote並みの神アプリになることを期待…!) http://inboardapp.com/ Tired of screen

    スクラップブック界の神アプリ!?INBOARDの使い方 【画像収集ツール】 | WebNAUT
  • 2時間でSassを習得!Sass初心者向け講習スライド大公開! | WebNAUT by Beeworks

    ※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基を短時間でマスターできます! この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip(3.5MB) Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass

    2時間でSassを習得!Sass初心者向け講習スライド大公開! | WebNAUT by Beeworks
  • 【検証】クリックされるボタンの色は? | WebNAUT by Beeworks

    検証したパターン 調査結果 全アクセスのコンバージョン率(CVR) 結果は下記の通りとなりました。 なんと!緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか? 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 > WebNAUT > なめぱら という結

    【検証】クリックされるボタンの色は? | WebNAUT by Beeworks
  • 1