web制作者も知っておきたい！はじめての店舗販促デザイン | WebNAUT

2017/06/19 27 users 苦い思い出 Webデザイナー ノウハウ 要素 O2O施策

O2O施策をご提案する機会も多いこの頃、web制作者にも販促物デザインが求められることがあります。 「要素を整理してリサイズしておけば大丈夫！」と思っていませんか？ 今回はwebデザイナーも知っていて損はない、店舗販促デザインのノウハウをご紹介します！ 過去の苦い思い出 ビーワークス入社以前の、販促業界でSPツールを制作していた頃のお話です。 初めてキャンペーン用のツールを制作した際に、効果測定も... 続きを読む

FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT

2017/04/07 79 users FLOCSS CSS設計 あなた

Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで 大海原に放り出された赤子のような気分 になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計がある... 続きを読む

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

2017/03/06 106 users エンジニア 静止画 印象 参考 マークアップ

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「 見るだけ 」ではなく「 使うもの 」ですので、実際には様々な「 動き 」や「 状態 」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討してい... 続きを読む

WEBも紙も！ハイブリッドなクリエイターになるために ―印刷加工の基礎知識― | Web制作ならWebNAUT

2015/02/25 103 users クリエイター web Web制作 基礎知識

Category Direction Design Markup Develop Others Tools Sublime Textのスニペットファイルを確認するツール Grunt環境設定テンプレート About WebNAUT 株式会社ビーワークスの運営する研究紹介サイト。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。 詳しくはこちらか... 続きを読む

小さな変更で大きくUXを改善するマイクロデザインってなに？ | Web制作ならWebNAUT

2015/02/04 153 users Web制作 変更

Category Direction Design Markup Develop Others Tools Sublime Textのスニペットファイルを確認するツール Grunt環境設定テンプレート About WebNAUT 株式会社ビーワークスの運営する研究紹介サイト。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。 詳しくはこちらか... 続きを読む

縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | Web制作ならWebNAUT

2015/01/08 993 users デザイナー やりとり ディレクター 正月 ディレクターさん

明けましておめでとうございます！ 特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させて頂きます。 デザイン確認時によくあるやりとり デザイナー： トップページのデザインデータが出来ました！1枚画像に書き出しましたので確認をお願いします。 ディレクター： ありがとうございます！確認し修正点などあれば指示致します。 ここでディレクターさんはデザインの確認... 続きを読む

あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ | Others | WebNAUT

2014/09/02 146 users Prott others プロトタイプ あっという間 ツール

Category Direction Design Markup Develop Others About WebNAUT 株式会社ビーワークスの運営する研究紹介サイト。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。 詳しくはこちらから。 Tag 3D Ai API application CMS Compass CSS Dreamwea... 続きを読む

2時間でSassを習得！Sass初心者向け講習スライド大公開！ | Markup | WebNAUT

2014/02/04 491 users Markup Sass CSS スライド 講習

CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイル... 続きを読む

あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | Design | WebNAUT

2014/01/06 557 users TypeSquare WebFont 書体 DESIGN 使用

あけましておめでとうございます！定番フォントを愛してやまない、デザイナーTです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォ... 続きを読む

一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | Markup | WebNAUT

2013/08/26 738 users エディタ 断片 単語 記述 Markup

気がつけば繰り返し同じ単語で検索し、同じコードを書いている...なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりする... 続きを読む

【検証】クリックされるボタンの色は？ | Design | WebNAUT

2013/08/21 433 users CVR DESIGN Firefox 緑色 ビーワークス

検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によっ... 続きを読む

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

2013/08/13 1996 users DESIGN 原則 要素 デザイン

Category Direction Design Markup Develop Others About WebNAUT 株式会社ビーワークスの運営する研究紹介サイト。クリエイティブに関する様々なお役立ち情報を通して、ビーワークスのこだわりや制作プロセスをご紹介しています。 詳しくはこちらから。 Tag 3D Ai application CSS Dreamweaver Google Analy... 続きを読む