BtoBサイト制作の『型』となるワイヤーフレームと180項目のチェックリスト
才流（サイル）では、2019年よりWeb制作会社の株式会社ベイジ、企業のデジタルマーケティングを支援する株式会社WACULと3社共同でBtoBサイトの成果創出パターンをまとめたチェックリストと、それを反映したワイヤーフレームを公開しています。 一口にBtoBサイトといっても、形は企業や商品・サービスによって異なるものです。自社のビジネスモデル、顧客の属性、組織の特性、その時々の業界事情などにより、100％同じにはならないこともあるでしょう。しかし、そうした個別事象があったとしても、BtoBサイトとしてかならず押さえておくべき型は明確に存在します。 本チェックリストとワイヤーフレームはその型を網羅しています。ぜひ自社のBtoBサイトとチェックリストを照らし合わせて、課題発見・改善に役立ててください。 BtoBサイトのワイヤーフレーム（PowerPoint形式）をダウンロードする BtoBサイ
まだAdobe XD使ってないの？はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
やっとかめだなも！ LIGのWeb事業部でマネージャーをしているちゃんれみです！ 最近、周りの人からAdobe XDについて質問されることが増えてきました。すっかり「XDおばさん」の名が定着してきたようです。 Adobe XDとは Adobe XDは、Webアプリやモバイルアプリ用のユーザー操作性をデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） ところが先日公開されたAdobe XD対談記事をシェアしたところ、意外にも「XDがんばって覚えねば……」「XDそろそろやらなきゃ」というコメントがいくつか寄せられ、まだまだAdobe XDを使ったことない方がいるんだな、と感じました。今回はそんなAdobe XDビ
ディレクター・デザイナーのWF（ワイヤーフレーム）の書き方の違い！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのタリーです。 入社して半年が過ぎようとしています。 最近ではプロジェクトの初期段階から案件にアサインされ、デザイン前の工程、WF(ワイヤーフレーム)を自身で作成することも多くなってきました。 今回はディレクターとデザイナーとでWFを引く際に気をつけていることをまとめてみました。今後案件でWFを引くときのチームメンバーの意見合わせの参考にしてもらえれば幸いです。 それでいってみましょう！ おすっ！ はじめに WF(ワイヤーフレーム)とは Webサイトを作る上で必要になってくる情報の設計図のことです。ページの中にどんな要素を盛り込むのか、画像や文字量はどのくらいかといった点を、クライアントやチームメンバーと認識合わせするために必要となってきます。 プロジェクトによってはディレクターが引くことが多いと言われるWF。案件によりけりですが、プロジェクトの初期段階から携わる案
Wirify – The web as wireframes
Wirify bookmarklet lets you turn any web page into a wireframe in one click ← Drag the link on the left to your browser Booksmarks toolbar, then go to a website and click "Wirify by Volkside" to wirify the page! I agree to the terms of service by accessing, installing or using Wirify Wirify is free, easy and fun to use Step back and see the big picture of a web page Focus on page structure by hidi
Adobe XDで快適！と感じたこと6つ - aicocco/かんろ
こんにちは、かんろです。 最近仕事でAdobe XDを使う機会がとても増えました。 Fireworksが開発終了になってからワイヤーやカンプはIllustrator中心で作成していて、少しのAffinity Designerを使っていた時期もあったのですが、使っていた当時は日本語入力がとても弱かったことと、周りの人とデータの共有がしにくかったのでIllustratorに戻りました。 作業の流れは、ワイヤーを書きカンプ、そしてモックアップを作りながらプロトタイプを作っていくようなイメージで進めています。これを1ファイルで済ますことができるのが個人的にとても便利！ あと、なんといっても軽いのがうれしい！起動がめんどくさくないというのが地味に大きいです。 そんなAdobe XD、気になってはいたけどまだ使ってない、でも気になる！という人向けに、個人的に良いな、便利だな、と思った機能を改めてまとめ
ワイヤーフレームの作り方のコツ｜制作時や評価時に意識すべきこと | 株式会社PLAN-B
サイト制作をする前に必ず作らないといけないワイヤーフレーム。 「ワイヤーフレームってデザインの下書きでしょ？」 というような認識の方もいらっしゃるのではないかと思いますが、それは間違いということをこの記事を読んで知っていただきたいです。 これからワイヤーフレームを作成しないといけないという方や、制作会社からあがってきたものを評価しなければならないという方は、ワイヤーフレームをなんのために作るのかをぜひ知っておいてください。 PLAN-Bクリエイティブユニットのワイヤーフレームの考え方をご説明します。 ワイヤーフレームはデザインの下書きではないワイヤーフレームに対する勘違い作成する側も評価する側も一度は陥ってしまうのではないかというのが、ワイヤーフレームにデザインを求めてしまうことです。自分自身初めてTOPページのワイヤーフレームを作成した時に、コンセプトを表現するようなデザインにするにはど
CSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップを公開します｜CSS Nite公式サイト
ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・セッション2016CSS Niteベスト・セッション2015CSS Niteベスト・セッション2013CSS Niteベスト・セッション2012CSS Niteベスト・セッション20112010年のベスト20セッション CSS Niteについて CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。 これまでに、600回を超える関連イベントを通し
デザイナーがWF（ワイヤーフレーム）で確認すべき4つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近、シェアハウスの日当たりのいい部屋にカメムシが大量発生する事案が勃発し、気が気じゃない日々を過ごしています。どこから入ってくるんでしょう、あいつらは。 さて、今回はWF（ワイヤーフレーム）を受け取ってからデザインをし始めるまでに、どんな点を確認しているのか？ どんな点に注意すべきなのか？ を改めて振り返ってみようと思います。 そもそもWFってなに？ 誰が引くの？ WF（ワイヤーフレーム）とは、ざっくり言うとWebサイトの設計書です。ひとつのページの中にどんな要素を盛り込むのか、画像や文字量はどのくらいかといった点をクライアントやチームメンバーと認識合わせするために用います。 誰が引くのかはプロジェクトによってまちまちですが、大体はディレクターが作成することが多いです。私は割とWF引くのも好きなので、WF作成からデザイン作成までやる
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは
Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは Webサイトの上手な作り方をAirbnbを事例に学んでいきます。サイト作成をする上でワイヤーフレームやモックアップを作りますが、どうやって作るのか参考になるでしょう。ユーザーにとって使いやすい優れたサイトを作る上でぜひご覧くだささい。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。 また本
意外とできてる会社ばかりではない！？Webデザインを行う前にすべき、Webディレクション作業まとめ。
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております！（宣伝） えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段：コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る（共通言語となる目標を決める） 4.ポジション設定をする（競合に対しての強みを見つける） 5.ペルソナ作り（
プロトタイプやワイヤーフレーム作成ツールまとめ | WordPressやWebデザインなど紹介 Ocadweb
Webサイトやアプリの制作をするときには必須となるプロトタイプやワイヤーフレーム。 WEB制作を依頼するときにワイヤープレームありますかと聞かれることがあると思います。 Web制作依頼する前に、サイトの内容やイメージするデザインサイトやこういう風サイトにしたい、そしてワイヤーフレームを作っておくと話が早いと思います。 もちろんパワポでも、Keynoteでも作ることができます。 今回はプロトタイプやワイヤーフレームを作成するときに便利なプロトタイプやワイヤーフレーム作成ツールをご紹介します。 まずは「プロトタイプ」や「ワイヤーフレーム」について。 プロトタイプやワイヤーフレームとは プロトタイプとは ページを構成する要素や機能だけでなく、ページ間の遷移やクリックしたときの動きや操作感などの確認ができるものをプロトタイプ（試作品）と言います。 本格的な制作に入る前にプロトタイプを作成することで
アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
作成：2016/08/16 Webデザイン > ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類。 エンジニア速報は Twitter の@commteで配信しています。 料金ページ 今月話題となった料金ページのみをまとめてあるTumblr製のプライスページギャラリー集。ブログなどに埋め込み可能。 Pricing Pages グリッド参考 スクリーンショットにグリッドを入れてある、グラフィック(紙)やWebのデザインルールがひと目で分かるWebデザインギャラリー集。手間がかかってます。 Grids 404ページ 404ページのみ集めてあります。背景にどんな写真を使ってある
Webサイトの目的別5パターンの鉄板レイアウト
Webサイトの目的は様々あります。 サービスの認知度向上や広告での売上獲得などあらゆる目的が存在し、それぞれに応じた最適なレイアウトがあります。 今回は、目的別に代表的なレイアウトを、最新トレンドも交えながらご紹介します。 これからWebサイトを制作する方はもちろん、現状のWebサイトが目的に対して最適なレイアウトになっているかという観点からも参考にしてみましょう。 1.商品やサービスの認知度を向上させたい いわゆるプロモーションのためのWebサイトです。広告では、表示回数（露出数）を主に狙っていきます。よりユーザーの記憶に残るように、サービス・商品の名前や特徴を印象付けるデザイン・レイアウトが必要になってきます。 よりビジュアルに特徴をもたせたものが多いです。最近では画面いっぱいに写真や動画を配するデザインが流行しており、Bootstrapのテンプレートを使用すれば簡単に導入できるのでオ
フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
【Webサービスを作ろう】事例からUI設計を学べる「Nicely done」がすごい勉強になる！
【Webサービスを作ろう】事例からUI設計を学べる「Nicely done」がすごい勉強になる！ いろんなWebサービスの画面設計・UI設計をまとめている「Nicely done」というサービスの紹介。Webサービスの企画、開発をする上で参考になるはずです。Webデザインの勉強にも役立ててみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 海外ではあらゆるWebサービスの画面設計、UI設計をまとめている「Nicely done」
Webサイトのアイデアを形にする！ワイヤーフレームやフローチャートに使える素材のまとめ
最近のWebサイトで使われているさまざまなレイアウト、ヘッダやフッタやナビゲーションやコンテンツのパターンがキット化されたワイヤーフレームやフローチャートを作成するのに役立つ無料素材を紹介します。 ランディングページや縦長ページをはじめ、コマースサイト、企業サイトなど、多種多様な案件に対応できます。スマホ用ナビゲーション100種類とかは勉強にもいいですね。 Platforma Web Wireframe Kit(.psd, .ai, .sketch) 最近のWebサイトで使用されているさまざまなコンポーネントがキット化されており、組み合わせるだけでさまざまなページのワイヤーフレームを作成できます。無料版と有料版があり、無料版でもかなりのボリュームです。 iOS Wireframe Kitも無料でダウンロードできます。
新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBサイト制作サービス