＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
重要なのは試行回数だった！1年でリード獲得3倍の成長を遂げた「ferret One」チームのマーケノウハウとは？
新型コロナウイルスの影響はビジネスのあらゆる領域に波及していますが、マーケティング領域も例外ではありません。ferretの人気記事の傾向を見ても、最近は動画・アニメ広告やブログ（note含む）などコンテンツマーケティングまわりの記事の注目が顕著に上がってきています。 この背景には「マーケ予算は縮小されたが、目標数字は下げるわけにはいかない」という状況の中、マーケター自らがパフォーマンス改善を日々行い続けていく必要に迫られているためだと推察されます。ただ、これまで実施部分は代理店や外部デザイナーに依頼していたような業務についてはいきなりうまくできるわけではありません。 そこで、この状況下でも順調に成果を伸ばし、昨年比で3倍ものリード獲得を実現している「ferret One」マーケティングチームの「リアル」な取り組みを紹介することで、日々の打ち手の解像度を上げる参考にできればと思い、弊社マーケ
F12必押！コンソールでおもしろ表現をしているサイトのご紹介！ | バシャログ。
ウェブ制作をするうえで欠かせない強力な味方、開発ツール。F12キーを押すだけで駆けつけてくれる健気なやつです。その中で、JSやCSSのエラーなどを記録してくれるウェブコンソールという画面があります。とある日、株式会社ホムンクルスというすごいサイトを作る会社のウェブサイトの構造を見ていたとき、コンソールを見てみると求人募集しているじゃありませんか！これはネタの予感。というわけで色々なサイトのコンソールネタを探してみました。みなさまもレッツF12！ 求人募集系 コンソール見る奴らはウェブ関係者に違いない！勧誘だ！ということで求人情報載せてるサイトさんは結構多かったです。 株式会社ホムンクルス はじめに紹介したホムンクルスさんはシンプルに勧誘メッセージとURL。 「そこの方！」って言われるとドキッとしちゃいます。コンソールをのぞく時、コンソールもまたこちらをのぞいているのだ。 Pinterest
コーポレートサイトのリニューアル、何を改善すれば良い？ データに基づくボトルネックの探し方を考える
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
逃げずに、対峙する！ 大規模Webリニューアルの「移行」マネジメント | Finding | 株式会社ロフトワーク
突然ですが、問題です。 あなたは、7,000ページの既存コンテンツを持つ大規模なWebサイトのリニューアルプロジェクトを担当することになりました！ 50ページくらい、デザイナーと一緒にデザインを制作します。 では、残る6,950ページは、一体どうなるのでしょう？ 情報設計⇒デザイン⇒コーディング⇒CMS開発… さまざまな本でWeb制作のワークフローが紹介される中、見過ごされがちなのが「移行」というプロセスです。 Webリニューアルプロジェクトでは、過去に「自由な」ポリシーで作られた多様な既存ページを、新しいコンセプトと目的に沿って統合していかねばなりません。CMSの導入はその基礎になりますが、表組や、画像や、複雑なレイアウトや、アニメーションや独自プログラムなど、一筋縄ではいかないコンテンツ群が大抵存在し、プロジェクトの終盤はその処遇に頭を悩ませることになるでしょう。CMSへのコンテンツ登
櫻田潤 | インフォグラフィック・エディター
VISUALTHINKINGとは？ サッカーとインフォグラフィックを愛するコンテンツレーベルです。インフォグラフィック・デザイナーの櫻田潤が運営しています。 プロフィールを見る Instagram X
指定したウェブサイトのパフォーマンス比較を定期的にメールで届けてくれるサービス「RIGOR」 | ライフハッカー・ジャパン
「RIGOR」は指定したウェブサイトのパフォーマンス比較結果をメールで届けてくれるサービスです。ウェブサイトのレンダリング時間やページのサイズなどを比較したレポートをメールで送ってくれます。競合サイトとの比較を定期的に確認したい方には重宝するかと思います。 以下に使ってみた様子を載せておきます。 まずRIGORへアクセスしましょう。 まずは比較するサイトを指定します。競合サイトは最大4つ指定することができますよ。結果を届けるタイミングも指定できます。毎週、毎日、一度だけの3パターンから選べますね。あとは結果の送り先メールアドレスを入力して完了。 たとえばこのようなレポートが届きます。どのサイトがどの項目で優れているかがひと目で分かりますね。ぜひ競合サイトのパフォーマンスを定期的に知りたい方は導入してみてはいかがでしょうか。 RIGOR （カメきち）
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
納品前 品質・納品チェックシート | コムテブログ
TL;DR テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。 機能 要件定義をもとに指定の機能が実装済か確認します。 項目 解説
これは助かる！Web制作を円滑に進めるために役立つ資料テンプレート
クライアントとの更新やりとりを10倍楽にする（か... / 【無料配布】Web制作における書類一式、そしてド... / WEBサイト制作前やデザイン制作時に欠かせないヒ...他...全5件
コンテンツ管理で解決しなければならない課題
コンテンツ管理というと、真っ先に CMS （コンテンツ管理システム）を連想する方はいると思います。どのシステムを導入するかを考える前に、そもそも Web におけるコンテンツ管理とは何かを理解しておく必要があります。理解を深めることで、クライアントが抱えている課題と解決のための模索がしやすくなります。 コンテンツを管理するということは、システムの中にデータを保管し、様々な形式に書き出すことだけに留まりせん。多くの場合、システム導入だけでは解決しない課題にぶつかります。CMS を導入しただけでは、Web コンテンツ配信における課題の一部を解決したに過ぎません。 コンテンツ管理で解決しなければならないことは、主に以下の7点です。 コンテンツの保管 テキストだけでなく画像や PDF など様々な種類のコンテンツを保管できるような仕組み。検索性が求められるだけでなく、誰がどのコンテンツにアクセスできる
ワイヤーフレーム作成時に役立ちそうなサイトや記事のまとめ | バンクーバーのうぇぶ屋
僕の日本人クリエイター専用シェアハウス『Frog House』の住人の一人が、BCITという名門IT系専門学校へ通っているんですが（彼のような日本人クリエイター留学生の話は来月のセミナーでしたいと思ってます）、そこの課題にどうやら自由な発想でワイヤーフレームを作ってこいみたいな課題が出たらしく、先日『ワイヤーフレーム作る時に使ってる物や参考になるサイトは無いか』と聞かれたので、こりゃ住人に良いカッコするチャンスと思ったから書く、という不純な気持ちで書いています（笑） でも、思っても見たら今までワイヤーフレーム系のネタで書いた事も無いし、良い機会なので、僕が知ってるワイヤーフレームを描く時に便利そうなツールやサイトを、この機会に全部まとめておこうかなと思います。 制作ツールは勿論のこと、素材サイトや確認ツール、なんか色々独断と偏見からワイヤーフレーム描く時便利そうって思える物ばかり紹介する（
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
更新ファイルを抽出して書き出すアプリCowsee。これは便利すぎて酒が進む。
Download Cowsee now. This application requires Adobe® AIR™ to be installed for Mac OS or Windows. WEBサイト制作の仕事をしていて、よく「何月何日よりあとに変更のあったファイルのみ納品」ということがあります。 それらの作業がしやすくなるように、指定したディレクトリの中から指定した日時以降に更新のあったファイルのみを抽出して、別のディレクトリにコピーして書き出すアプリを作りました。階層構造も保ちますので、書き出されたディレクトリをそのままアップロードしたり、zipに固めて納品したりできます。 あ、あと下↓にスクリーンショットがありますんで、変なおっさんの写真（私です）とか出てるのはこのページだけで、アプリはそんなことないんで、いたってまじめなんで、よろしくおねがいします。 フリーソフト！ 便利な
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
ヒートマップ解析でサイトのコンバージョン率を倍増させる７つの方法｜MarTechLab（マーテックラボ）
LPO研究所の土井です。 さて、あなたは「ヒートマップ解析ツール」というのを使ったことがあるでしょうか？ ヒートマップ解析ツールとは、サイトに訪れたユーザーがページ内でどこに注目しているのかを、冒頭の画像のようにサーモグラフィーのように表示するアクセス解析ツールです。 「アナリティクスしか見てない」 「ヒートマップって役に立つの？入れてもムダじゃない？」 「難しそうだし私にはちょっと…」 ヒートマップ解析というとこのような方が大半だと思いますが、非常にもったいないと思います。 まずは以下の事例をご覧ください。 これはあるコスメ系ECサイトで、ヒートマップ解析をもとに「買い物かごボタン」の再配置などを行った結果、コンバージョン率が1.5倍になった事例です。 このように、「もう上がらないだろう」と思っていたページのコンバージョン率が、ヒートマップ解析ツールを適切に使うことで1.5倍、2倍になる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create stunning product mockups easily and online - Smartmockups
三菱電機は世界31ヵ国を束ねる巨大グローバルサイトをいかにしてリニューアルしたのか？／スーパーWebマスター粕谷俊彦さんに聞いてきた | Webのコト、教えてホシイの！ | Web担当者Forum
https://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf