Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.
先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
コロナ禍の「Webサイトの役割」を考える。CMS選定のポイントも解説 | “人と会えない” コロナ時代に企業Webサイトに求められるもの ～CMS選定・完全マニュアル
コロナ禍で、改めてWebの重要性が浮き彫りになった。外出や出社ができない中で、顧客と企業との接点がインターネットに集約されたからだ。新型コロナウイルスの影響でテレワークが当たり前になる中で、Webに求められることやWebサイト運用時に必要不可欠なCMS（コンテンツ管理システム）選定のポイントをキノトロープ社長の生田昌弘氏に聞いた。聞き手はWeb担当者Forumの四谷志穂。 コロナ禍でもWebサイトの役割は変わらない企業の意識は、コロナ禍の影響で大きく変わり、同時にユーザーの意識も変化した。出社や外出が難しくなったことで、初めてインターネットサービスに手を出した人も多いはずだ。 これまでもネット人口は増え続けていたが、コロナ禍によってインターネットをより“深く”使うようになった（生田氏） たとえば、「インターネットを使う」と言っても、SNSやオンラインゲームをするだけでは、まだインターネット
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
メアドを入力すると、流出被害に遭っているかが分かる Mozillaが無料のチェックサービス - ITmedia NEWS
専用サイトでユーザーが自分の電子メールアドレスを入力すると、その情報が流出被害に遭っていないかどうかをチェックできる。 米Mozilla Foundationは9月25日、自分のアカウント情報が流出していないかどうかをユーザーがチェックできる無料サービス「Firefox Monitor」の正式提供開始を発表した。 同サービスは、ユーザーが日常的に利用するWebサイトを通じてメールアドレスやパスワードなどが流出する事件が後を絶たない現状を受け、セキュリティ研究者のトロイ・ハント氏が運営する「Have I been pwned？（HIBP）」と提携して開設された。2018年7月から実施していたテストを経て、今回、一般ユーザー向けに正式公開することにしたという。 Firefox Monitorのサービスは、専用サイトの「monitor.firefox.com」を通じて利用できる。ユーザーが自分の
サイトクオリティを落とさないためのWEBデザイナーがすべき「思いやり」の話 | 株式会社PLAN-B
デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしまったり。かく言う私もそんな経験のあるデザイナーの一人でした。 ほとんどのサイトがデザイナー1人で作られているわけではありません。サイト規模、プロジェクト規模により、チーム体制も変わりますが、エンジニアやデザイナーが複数人でサイトを作り上げることも多いのではないでしょうか。フリーランスのデザイナーであれば外部リソースとのやりとりなどが必要になる場合もあります。 今回はサイト制作時に役立つだけでなく、公開後のデザインを長く保ち、サイト規模が大きくなるほど重要になるデザインルールを共有するための、スタイルガイドに着目したいと思います。 スタイルガイ
test.comやaaa.comをテストデータに使うのはやめましょうという話 – 打つか投げるか
2018/02/13追記：「サンプル用のドメインを使おう」の説明に “.example” と “.test” の使い分けについて追記しました。 Web システム開発時のテストデータを作成する時、また各種ドキュメントを書いている時など、サンプルの URL を使う場面は多いと思いますが、その時に適当なドメイン名を使うのはやめましょう、という話です。 知っている方には当たり前レベルの話ですが、意外と IT 企業のシステム開発現場等でも普通に見かけることがまだまだありますので・・・。 よく見かける例 例えば、こんなドメインの URL で開発中システムのテストデータを作っていたり、仕様書に説明が書かれていたりする場面をよく見かけませんか？ test.comaaa.comabc.comsample.comdummy.comhoge.com でも、これらのドメインって存在していて、また実際に利用されてい
さくらのサーバーでWordpressをSSL（https://）対応した時の手順10 - Design Color
今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される 8月中旬に、Search Consoleから「Chrome のセキュリティ警告を示します」という件名のメールが届きました。 どうやら、今年10月からChrome(バージョン 62)でテキストフォームに入力すると、「保護されていません」という警告が表示されてしまうとのことです。 「テキストフォーム」とは、ブログでいうところの「お問い合わせ」や「コメント」、「サイト内検索」にあたるフォームが該当します。 さらに、メールには「長期的には、HTTP で配信されるすべてのページを『保護されていません』と明示することを計画しており、この新しい警告はその一環です。」とあるので、サイトをSSL(https:// )対応することは避けられない流れです。 というわけで、10月を目前に、今まで先延ばしにしていた
【Webデザイン】Webサイト制作は家造りに例えると分かりやすい（２） - ヤマダライフログ
前回のワイヤーフレームの続きです。 ヤマダソウイチロウ（@sou16ooo）です。本日もお読み頂きありがとうございます！ トップページデザインは家本体 それぞれのお部屋がコンテンツページ 部屋の中にある家具がコンテンツ 電化製品でより快適に まとめ Webサイト制作は家造りに例えると分かりやすい（１）まだ見ていない方は下記のリンクよりご覧ください。 トップページデザインは家本体 前回まででワイヤーフレームが終わりデザインに入るためのベースが終わりました。 次はトップページデザイン。これはサイトの顔になるのものとなり、家そのものと考えていただきたいです。 壁の色、屋根の色、ドアや窓の位置などヒアリングした内容を元にクライアントの希望とするイメージに近づけて制作していきます。 どこに部屋を配置するかによって使い勝手が変わるのと同じで、トップページのレイアウトによってサイトの使い勝手が全く違いま
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ
美味しそうな飲食系Webサイト27選！デザインテクニック解説付き | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。 9月に入って、なんだかすっかり秋めいてきましたね。わたしの夏はどこにいってしまったのでしょうか……。 と、憂いてばかりはいられません。秋といえば、食欲の秋！ ということで、今回は、食欲の秋にぴったりのおいしそうなデザインのサイトを、おいしそうに見せるテクニック別にご紹介します！ 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ※ 2015年9月11日に公開された記事を再編集したものです。 写真でダイナミックにみせる 素材や料理をしっかり見せたいときや、写真のクオリティーにこだわることができるときにお
これが無料！？SEO・マーケティング分析ツールの「Nibbler」がスゴい
先日、Nibbler（ニブラー）という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながら、かなり詳細にサイト分析（改善点の可視化）が行える素晴らしいツールだったので紹介です。 Nibblerとは Nibbler – Test any website Nibblerとは、フリーのウェブサイトテストツールです。 アドレスを入力するだけで、アクセシビリティ、SEO、ソーシャルメディアテクノロジーなどの観点から、ウェブサイトをクロールして、レポートを出してくれます。 加えて、適切な改善提案を示してくれるので、提案に従ってサイトを修正すれば、かなり良いサイトに仕上がるのではないかと思います。 Nibblerを英和辞典で調べてみると、「少しずつかじる（小動物）」、「打抜き切断工具」などという意味があります。サイトを細かく分析するツールという意味もあるのだと思いま
これは使える！フリーフォント検索・ダウンロードサイト５選 | ブログのスイッチ
フォントによって、見た目の印象はかなり変わります。 言い方を変えれば、フォントを上手く使いこなすことによって、表現の幅を広げることも可能です。 とは言っても、なかなか自分が使いたいフォントを見つけるのは非常に大変です。 ということで、今回はそんな方のために役に立つフリーフォント検索・ダウンロードサイトをいくつかご紹介します。 FREEフォントケンサク FREEフォントケンサクは、国内のフリーフォントをまとめたフリーフォントリンク集です。 各フォントを見本付きで書体別・ジャンル別で検索できるので、とても便利。 オーソドックスなフォントから個性的なデザインフォントまで幅広く揃っています。 フォントに困ったら、まずはこのサイトで探してみると良いでしょう。 FREEフォントケンサクのサイトはこちら
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
【黄金比・計算サイト】 - レイアウトの小技 Ver2.0 電脳狂想曲 WEBデザインの小技
推奨ブラウザ：Firefox2.0, Internet Explorer 5.5以降 注意：比率の計算上、割り切れないので誤差が発生します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Check WebTech|採用技術にフォーカスしたWebサイトリンク集。トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。
TechCrunch
指定した2つのWebページの差分を表示してくれるサイト「Diffee」 - グノシー
