タグ

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

  • 意外と知られていない?UIデザインのためのレイヤーカンプ活用法 | WebNAUT by Beeworks

    ※この記事は2017年8月31日に執筆された記事です。現在は仕様が異なる可能性があります。 単純作業や管理の時間はできるだけ節約して、考える時間やクオリティアップに時間を費やしたいと考えるデザイナーは少なくないはずです。今回はアプリのUIデザイン制作を加速させるPhotoshopのレイヤーカンプ機能の、意外と知られていない使いこなし術を紹介します。 そもそもレイヤーカンプってどんな機能? 下記はAdobe公式サイトから抜粋した解説文です。 デザイナーは、クライアントに見せるためによく複数のデザイン案(カンプ)を作成します。レイヤーカンプを使用すると、1つのPhotoshop ファイルで、複数のレイアウトバリエーションを作成、管理および表示することができます。 レイヤーカンプとは、レイヤーパネルの各レイヤーの状態を記録したスナップショットのことです。レイヤーカンプには、次の3種類のオプション

    意外と知られていない?UIデザインのためのレイヤーカンプ活用法 | WebNAUT by Beeworks
    asyst
    asyst 2017/09/02
  • web制作者も知っておきたい!はじめての店舗販促デザイン | WebNAUT

    O2O施策をご提案する機会も多いこの頃、web制作者にも販促物デザインが求められることがあります。 「要素を整理してリサイズしておけば大丈夫!」と思っていませんか? 今回はwebデザイナーも知っていて損はない、店舗販促デザインのノウハウをご紹介します! 過去の苦い思い出 ビーワークス入社以前の、販促業界でSPツールを制作していた頃のお話です。 初めてキャンペーン用のツールを制作した際に、効果測定も兼ねて店長会でアンケートを行ったことがありました。 クライアントからの一定の評価は得られたけれど、 テナントに立つスタッフの満足度はイマイチ だったんです。 「この場所に掲示したかったけれど、ツールに幅があったから別の場所にした。使いづらかった。」 というものでした。 昨年と同じサイズで制作すれば良いと思い込んでいましたが、 小売はスタッフやレイアウトも流動的なことが多くその時々で使い方や仕様・ツ

    web制作者も知っておきたい!はじめての店舗販促デザイン | WebNAUT
    asyst
    asyst 2017/06/19
  • 小さな変更で大きくUXを改善するマイクロデザインってなに? | WebNAUT by Beeworks

    ※この記事は2015年2月4日に執筆された記事です。 1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか? 王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。 このマイクロデザインという言葉、概念としては新しくないのですが、 日ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。 目次 マクロデザインとマイクロデザイン マイクロコピーとは? マイクロインタラクションとは? マイクロデザインとブランディング まとめ マクロデザインとマイクロデザイン マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。 WEBデザインでいうと、マ

    小さな変更で大きくUXを改善するマイクロデザインってなに? | WebNAUT by Beeworks
  • 縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks

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

    縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
    asyst
    asyst 2015/01/08
  • あっという間にプロトタイプがつくれるツール「Prott」!グッドパッチ様とユーザーレビュー会も開催しました! | WebNAUT

    あっという間にプロトタイプがつくれるツール「Prott」!グッドパッチ様とユーザーレビュー会も開催しました! こんにちは!ディレクターの田川です。みなさんはモバイルのアプリやWEBサイトを設計するときに、プロトタイピングツールをお使いでしょうか? ビーワークスでも、モバイルのアプリやWEBサイトを設計するときは、実機でのUIの見え方や使用感をチーム全員で共有するために、できるだけプロトタイプをつくるようにしています。 プロトタイプを作成するツールは色々ありますが、株式会社グッドパッチ様が提供している「Prott」は、操作が直感的で使いやすく、弊社ディレクターやデザイナー陣など多くのメンバーが使っています。 今回はProttのご紹介とグッドパッチ様がユーザーレビューでご来社くださいましたので、その様子をレポートします。 Prottのおすすめポイント Prottは今年4月にベータ版がローンチさ

    あっという間にプロトタイプがつくれるツール「Prott」!グッドパッチ様とユーザーレビュー会も開催しました! | WebNAUT
  • 一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 | WebNAUT by Beeworks

    一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか?「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう! スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための

    一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
  • 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT

    「あなたは感覚派デザイナー?それとも理論派デザイナー?」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ! 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles(デザインの要素と原則)」や「Gestalt principles(ゲシュタルト原則)と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や

    感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT
  • 1