【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer | GrowGroup
こんばんは！炎のエンジニアこと石原です！ 人が社会の中で生きていく上で必須になるコミュニケーション。 Webサイトを作る上でも、チームの中でのコミュニケーション、クライアントさんとのコミュニケーションは制作物のクオリティを左右する重要事項です。 例えば、コーディング完了後、デザイナーにチェックしてもらう時。 サイトの校正作業を行う時。 クライアントさんに確認してもらう時。 紙に印刷して、チェックしたり、 スクリーンショットを取って、PDFにしてチェックしたり… どんだけ時間がかかるんだ！！ そう思っていました。ハイテクな時代にローテクなやり方。なんとかならんものか….. 意見を共有することにコストがかかりすぎる… 僕は探しました。課題を解決出来るツールはないものか、と。 そして。そしてついに見つけたのです！！！ そう。PageProoferをね。 今回はそんなチェック時にかなり便利な、弊社
「我々はモバイルバナー広告を掲載しない」：女性向けメディア「ポップシュガー」CEOに聞く | DIGIDAY［日本版］
女性向けライフスタイルメディア「ポップシュガー（PopSugar）」は、まもなく設立から10年を迎える。その10年間に、創設者のブライアン・シュガー氏はデジタルメディアの盛衰を見てきた。そんななか、シュガー氏が取り組んでよかったと回顧する初期の方策のひとつに、ディスプレイ広告に依存しないという方針がある。 米DIGIDAYの取材で、アパレルメーカーのJ.クルー元幹部であるシュガー氏は「eコマース出身の我々は、ディスプレイ広告に金をかけなかった」と語った。「我々はパフォーマンス・マーケティングに金をかけた。アフィリエイト・マーケティングがオンライン広告費の非常に大きな構成要素になると、私は確信していた」とシュガー氏。 代わりにポップシュガーが構築したのは、分散型のメディア事業だ。同社のビジネスモデルでは、ディスプレイ広告とネイティブプログラムが販売されるいっぽうで、アフィリエイト手数料やサブ
【スライド付き】Webサイト分析と改善の基礎（前編） | ナイルのマーケティング相談室
こんにちは、ナイル株式会社の伊佐敷と申します。 当社では、昨年から今年に掛けて、無料動画のオンライン学習サイト「Schoo（スクー）」にて「広告に頼らないWebマーケティングの考え方と方法」というテーマで全8回に渡って講義させていただきました。改めて、ご覧いただけた方々にお礼申し上げます。 今回は、Web分析や改善に携わることになった入門者～初級者の方向けに、7回目と8回目の講座「Webサイト分析と改善」についてスライドをご紹介します。 本記事は、7回目の「Webサイトの分析と改善の方法（前編）」について簡単に解説させていただきます。 前編と後編にわけて公開いたしますので、是非お役立てください。 ＼ナイルのサイト改善提案の紹介はこちらから！／ Index 0.はじめに 1.Webサイト改善の全体像 2.サイトコンセプトを考えよう 3.ユーザーシナリオを考えよう 4.KGI・KPI設定をしよ
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
ヘッダ、フッタ、ナビゲーション、見出しなど、Webサイトでよく使うパーツのデザインを集めたギャラリーサイトのまとめ
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
Web制作のクライアントにヒアリングしたい項目と意識すべき重要なこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターの まさしです。 ディレクターは、お客様の悩みや課題を解決へ導く、とても素敵な仕事ですよね！ お客様の課題が解決され、喜びが共有できたときが、ディレクターにとって一番嬉しい瞬間でしょう。（制作物が公開されたときよりも） さて、お客様の課題解決をしたい場合は、まずはヒアリングから始めますよね。 今日は、このヒアリングという部分において、一番重要だなと思っていることをお話しできればと思います。 何が一番重要かは、人によって違うかと思いますが、僕にとって一番だなと思う点をご紹介させていただきます。 ディレクターの皆さんと、その先にいるクライアントさんに少しでも良い気づきがあれば幸いです。 お客様が本当に依頼したいこと 僕がヒアリング時に一番重要だなと思っていることは、ビジネスモデルです。 まずWebサイトを作る際に、主に考えないといけない目線としては以下の2つがあげられ
プロに無償で仕事を依頼してもいい場合 | 高橋文樹.com | 雑記
この投稿は 9年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 「プロに無償で仕事を依頼するなんてけしからん！」という記事が定期的に話題になります。「友達だからといって」という条件がつく場合もありますね。 僕個人の意見では、「別にいいんじゃない？」というのが結論なのですが、どんなときによくなるのか、というのを箇条書きにしてみます。 動機や目的が素晴らしい 依頼者と僕の関係が深い、または魅了されている 隠し事をしない 3つしかないですね。では、それぞれについて説明します。 すばらしい目的や動機とはなにか まず、無償で仕事をする場合、当然ながらその仕事はおごってあげているようなものです。たとえば僕ならWebサイトを作ってあげるとか、小説を書いてあげるというのがプロとして価値のある仕事だと思うのですが、まるまる一つサイトを作る場合、調査にかかる
どーすりゃ上司は、わかってくれるんだ！ Web担当者って大変なのに……ヒト、予算をもっとくれ！ | Web担当者に告ぐ！ サイト運営にはコツがある
企業のなかでWeb担当者の置かれている状況は改善されてきたものの、まだ社内の理解が得にくい、他の部門と連携しながらWebサイトの運営ができていない、新しい施策がうまく回らない、予算がなかなか増えないという状況ってありますよね。 今回は、そんな悩めるWeb担当者の方のために、どうやって上司を説得し、Webサイトの運営に係る人々、経営、決済、運営組織、そして自社業態の市場とユーザー、いわばWebサイト運営に係るステークホルダーともいえる存在を意識した、戦術設計をどのようにすべきか具体的な戦略を練るうえで必要な考え方について説明します。下図の戦術の全体像を参考にしながら、記事を読み進めてください。 1st STEP Webサイトの成長モデルを可視化できている？まず、自社サイトの成長モデルについて整理をしてみましょう。前編で述べたとおり、Webサイトの運営には目的の定義が必要不可欠で、ヒト・モノ・
仕事でWebサイトにかかわるなら、“コンテンツ”が果たすべき3つの役割を知っておけ！ | 生田昌弘の「Web担当者に喝！」
「Webサイトを制作してください」とWeb担当者は言うけれどお客さまの問題を解決する情報がないのであれば、どんな「コンテンツ」があっても、Webサイトとしては機能していないと言っていい。 コンテンツという言葉の意味を、ここでは「情報」と定義する。 情報には、商品やサービスの基本説明のような基本情報と、お客さまの問題を解決するためのソリューション情報まで、さまざまな情報が存在する。 ここで問題にする情報とは、基本情報ではなくソリューション情報のほうだ。 基本情報でさえしっかりしていないWebサイトは論外としても、それ以外の情報がないWebサイトが多く存在していることは問題だ。 私は20年来、「Webサイトはお客さまの問題解決ツールであり、お客さまは目的をもってWebサイトに訪れるのだ」とクライアントに話してきた。 だから、お客さまの問題を解決する情報がないのであれば、Webサイトとしては機能
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
Webサイトの作り方のまとめ！番外。
サンプルサイトの制作を通して、「Webサイトの制作手順」についてまとめてみました（の番外です）。 前回の記事では、トップページのデザイン制作と、勢い余ってスライスまでしてしまいましたが、その後、依頼主からデザインの修正依頼がありました。この記事では、トップページデザインの修正と、下層（コンテンツ）ページのデザイン制作について書いてます。 目次です。クリックするとその項目へ移動します。 トップページデザインの修正 依頼主からの返答 改善案を考える 修正案を制作する ちょっと寄り道：ロールオーバー時の見せ方 サイトの役割を再確認 サイトの構成を決める サイト構成図を制作する ちょっと補足：サイト構成図？サイトマップ？sitemap？ 下層（コンテンツ）ページの制作 各ページに入れる内容を整理する レイアウトを考える 下層ページのデザイン制作 スライスしてWeb用に書き出し トップページデザイン
Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。
話し合い Webサイトの制作に向けて、まず最初にする事は、依頼主についての情報を収集することです。依頼主と話し合い、どんなサイトにしたいのか、方向性を決めてゆきます。 依頼主との話し合いでは、以下の2点について、しっかりと決めておく事が大切です。 サイトにどんな情報を入れるか、どんな人に向けて発信するか、サイトをどう活用していきたいかなど、サイトを立ち上げる目的は何かを確かめる。 どんな雰囲気のサイトにしたいか、理想とするサイトや、希望・要望を聞きながら、どういうデザインにするかイメージを固める。 また、同業他社のサイトを片っ端から見まくる事。今回の場合、喫茶店やパン屋さん、ケーキ屋さんなんかが参考になるかもですね。他のサイトではどんなコンテンツがあるか、どんな見せ方をしてるかとか、この業種だとどんな色遣いのサイトが多いのかとか、たくさんみる事で、刺激になったり、イメージが掴めたりします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
