成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
Adobe、ストック素材7万点を無料で公開 商用利用も可
米Adobeはこのほど、ロイヤリティーフリーの写真やイラストを提供する有償サービス「Adobe Stock」で7万点以上の写真や映像を無料化した。個人や法人を問わず使える他、商用利用も認める。ダウンロードにはAdobe ID（無料）の登録が必要。 公開したコンテンツは、写真や映像、3Dモデル、ベクター素材、イラストなど。Adobeの年次クリエイティブカンファレンス「Adobe Max 2020」（10月20日～22日）に合わせた施策。素材を提供したアーティストの権利も尊重したという。 関連記事 iPad版「Illustrator」リリース 月額1080円、Adobe CCユーザーは追加料金なし 米AdobeがiPad版「Illustrator」をリリースした。単体での利用料は月額1080円。「Adobe Creative Cloud」のユーザーには追加料金なしで提供する。 PDFをスマホ画
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 更新日：2019/12/27 Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。 ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。 常識的な内容も多いので、そのレベルは当然できてますという方
![[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/61015d8f4b04fb0dced52a6a21c4bd7213a4ba99/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2Fcode-friendly-kv2-1.png)
Webデザイナーとは ｜https://wp.yat-net.com/name
このブログはWebサイトのデザインや制作に関することを中心に色々なジャンルに基づいて書いているのですが、そもそもWebデザイナーが何なのか？を書いたことがなかったので、今回具体的に書くことにしました。 Webデザイナーと一口に言っても、在り方が様々なので、人によっては該当しないこともあるかもしれませんが、この業界を目指す人にとっては一つの指標となると思います。 目次 Webデザイナーの仕事 ヒアリングとスケジュールについて 情報設計（IA・情報アーキテクチャー） UIデザイン モックアップ・プロトタイプの作成 ページのデザイン コーディング 仕事の分担 Webデザイナーの種類 インハウスのWebデザイナーについて Webマーケティング SEO SEM 広告運用 必要なスキルや知識 資格 Webデザイナーになるには スクールを利用する 職業訓練校に通う セミナーに参加する 独学で学ぶ Web
Web制作者が知っておきたい！2017年ここ最近、よく見かけるデザインのトレンドのまとめ
2017年ここ最近、よく見かけるようになったデザインのトレンドを紹介します。 トレンドの好き嫌いに関わらず、デザインのアンテナを張っておくことは大切です。今すぐに使うことがなくても、未来のプロジェクトでその知識が役立つかもしれません。 Essential design trends, January 2017 Essential design trends, February 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 視線を誘導する空白スペースの新しい使い方 プロダクトの見せ方 パステルカラーはソフトに 画像のオーバーレイはダーク系 ブルータリズム テキストの新しいエフェクト 視線を誘導する空白スペースの新しい使い方 空白スペースはデザインを素晴らしくしたり、壊したりすることもあります。それが白や背景色、または文
PANTONEが選ぶ2017年の色「Greenery」を使った配色例
2016年12月14日 インスピレーション, 色彩 PANTONEはアメリカ、ニュージャージー州に本社がある色見本帳の販売や色に関わるさまざまなサービスを提供している会社。Webデザイン、プロダクトデザイン、ファッションデザインなど、多くの業界に影響を与え続けています。PANTONEはこの時期になると毎年「来年の色」を発表しており、2017年の色は爽やかな緑色の「Greenery」に決まりました。今回はその「Greenery」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Greenery」ってどんな色？ イメージ動画にも使われているような、春の新緑を思わせる鮮やかな黄緑色のGreenery。「爽やかで活力のある、新しい始まりを象徴する色」と説明されています。なんだか見ているだけでワクワクしてきちゃいますね！ 色の具体的な数値は以下の通り： PANTONE：15-
シニア層を対象にしたスマートフォンサイトのユーザビリティ
2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う
これからのWebデザインは、コンポーネント化を意識しよう
2016年6月14日 Webサイト制作, Webデザイン Webデザインのプロセスが変化しています。以前「実践で学ぶWebサイト制作ガイド まとめ」という記事でWebサイトの制作手順を紹介しましたが、この方法はまだ使えるものの、徐々に廃れていくでしょう。最近ではこの記事で書かれているように、画面にあるパーツ（部品）のみを用いてデザイン・コーディングするのではなく、あらかじめ様々なパーツを作っておいて、それを組み合わせて画面を構成していく方法に移りつつあります。今回はそんなパーツをまとめた「コンポーネント」について考えてみましょう。 ↑私が10年以上利用している会計ソフト！ コンポーネントとは？ Webデザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それ
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ
トップページは検索窓だけ--大胆なデザインに変更した神戸市の狙いとは
この2月から神戸市の公式トップページが、風景写真に検索窓を配置しただけという斬新なデザインにリニューアルし、話題となっている。リニューアルの経緯について、プロジェクトを手がけたペタビットのミキ チョクシ氏がCode for Kobeの定例会で説明した。 通常、自治体のトップページデザインは、市民への情報を発信する窓口として新着情報などのメニューがぎっしり並べられている場合が多い。だが、それで目当ての情報にたどり着けるのかといえば必ずしもそうとはいえず、神戸市のトップページも分析したところ、トップページの直帰率は50％以上と2人に1人は次のページに進まずに離れてしまうことがわかった。 ミキ氏らはさらに自治体サイトのトレンドを専門家の協力を得ながら分析し、そこから理想のあるべき自治体サイトとして、市民が困っていることを察知して用意するコンシェルジュとしての役割を果たせるようなページのあり方を提
おすすめデザイン入門書10選 : could
たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
UIデザインのアイデアを探す時にチェックしたいサイトのまとめ
Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。
ニュースアプリの「究極のUI」って何ですか？ Yahoo!ニュースと日経電子版が大激論
Yahoo!ニュースとエンジニアtypeが「『公共性×編集×テクノロジー』～ニュースメディアに求められる使命に、開発者はどう応えるのか～」と題した勉強会・交流会を9月17日に開催しました。後半のディスカッションでは、Yahoo!ニュースと日本経済新聞のアプリ担当者が、ニュースアプリに求められるUI/UXとは何かを語り合いました。 ⇒前半のディスカッションはこちら：【編集×テクノロジー】激戦のプッシュ通知 Yahoo!ニュースアプリの「苦い」1日 登壇者は、日本経済新聞の電子版アプリを監修したUIデザイナーの深津貴之さん（THE GUILD、写真左から2番目）、同紙デジタル編成局編成部の重森泰平次長（左から3番目）、ヤフー ニュース事業本部のUIデザイナー宇野雄（左から4番目）。モデレーターはエンジニアtypeの伊藤健吾編集長（1番左）。あわせてエンジニアtypeの記事「ニュースアプリ「究極
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
神戸市
Popular design news of the week: February 8, 2016 - February 14, 2016
Babington House | Soho House Members' Club & Hotel in Somerset
Design Patterns on CodePen