前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基本的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul

ウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。 Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。 Browsersyncのデモ動画 Browsersyncのデモ動画を紹介します。デスクトップブラウザとスマートフォン（iPhone）のブラウザが同期しており、ファイルの編集後に自動リロードしています。CSSでハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。 Browsersyncは何を便利にしてくれるのか ファイルの編集後に複数ブラ

ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン

現状あるサイトのページ一覧を取得したいとき、どのようにしていますか？手元にファイルがある場合はコマンドなどで取得可能ですが、CMSなど動的なコンテンツが組み込まれている場合、どうすればよいでしょうか。wget や W3C Link Checker などさまざまなソフトがありますが、ページ一覧だけが欲しいという時に限ってはいまいち使い勝手がよくありません。 そこで、URLを入力するとそのページの同ドメイン以下のリンク一覧を取得するプログラムを開発しましたのでシェアします。たとえば、URLに「http://shinobu.tumblr.com/」と入力して、「Get」ボタンを押してみてください。 http://tshinobu.com/lab/get-page-link/ Depthに1以上を設定すると、同ドメイン以下のリンクをたどって更にリンク一覧を取得します。これを繰り返すことによって、同

ペライチだけでなんでもできる 誰でも簡単に売上アップを 目指せるホームページ スマホ対応の本格ホームページがあっという間に。知識がなくても簡単な操作で作成が可能。不安な方へのサポートも充実。フォーム、決済、予約、メルマガ等、ビジネスに必要な機能が低価格でオールインワン

オウンドメディアの価値を向上するうえでは、「ユーザーにとって有益な情報や機能が提供されているか？」というユーザー視点が大切になります。受け取ってくれる人がいてこそ価値が生まれるのは、オウンドメディアにおいても同様です。つまり、ユーザーを中心としたUXを向上するアプローチが重要になります。そして前編で改めて整理したように、UXはとても幅広い概念であり、製品やサービスとユーザーの間に接点を生むチャネルやタッチポイントのすべてが関わります。オウンドメディアはその部分を構成するチャネルになります。 後編では上記を踏まえたうえで、オウンドメディアの価値を向上するUXのアプローチ例を紹介するために、Web技術を用いたオウンドメディアに対象をあえて絞ります。またその前提として、オウンドメディアやWeb戦略の視点と考え方を整理しながら、具体的な話をすすめていきます。 オウンドメディアを含む3つのメディアオ

PVが見られないサイトの情報を可視化するサイト『SimilarWeb』の紹介です。 こちらのサイトでは、知らないサイトのPVや流入元などを大雑把ですが、可視化することが可能です。 以前までだったらGoogle Adplannerなどを使っていましたが、このSimilar Webというサイトは、精度が高い気がします。 Alexaは、データがイマイチな気がするので使ってません。 自分のサイトノデータを出してみたのですが、Google アナリティクスのデータに非常に近いデータが表示されました。 http://www.similarweb.com/website/attrip.jp 公式のサイトのTwitterからお礼のつぶやきが来た。 @attrip 感謝 — SimilarWebさん (@SimilarWeb) 2013年6月12日

What is website architecture?Website architecture is the hierarchy of your pages and information. This organization is closely related to information architecture (IA), but this hierarchy applies to your overall website instead of smaller pages and posts. Website architecture covers how every single page on your website fits into the overall structure. For example, say you sell lawn care equipment

2012年 08月 24日 5つのサイトストラクチャ（Webサイト情報構造）を実際のサイトと照らしあわせて考える カテゴリ： IAシンキング Webデザイン タグ：IAシンキングWebサイト構築 サイトストラクチャとはWebサイトの構造のことです。サイトストラクチャを考える際には、作るサイトの目的に合わせた設計が必要なのは言うまでもありません。では、その目的に合わせた設計とはどういうものでしょうか？それを考えていきたいと思います。 1.サイトストラクチャ（サイトの構造）パターンについて 2.5つのパターンの解説 3.サイトの全体像と部分的な構造 サイトストラクチャ（サイトの構造）パターンについて Webサイト制作にあたり、サイトの設計で多く採用されるものとして5つパターンがあります。 階層型分類構造 ファセット型構造 Web型構造 直線型構造 ハブ＆スポーク型構造 名称だけを見てもピンと来

18 Comments Nice post, I like more “UI Wireframe Sketches” when designers do work on paper and after created on computer. Thank you for sharing these inspirational clean websites. I totally agree that a clean website uses just the necessary design elements to get its point across and naturally attracts the website visitors eye to the most important area(s) on screen. The examples you provide perfe

ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc

What happened? The web server reported a bad gateway error.

Tools 13 Super Useful UI Wireframe Tools Gisele MullerOctober 9, 20127 Comments04.3k When you begin to work on a project, it’s always important to begin creating your ideas as a wireframe. It is the step you take to put your ideas in action to see if what you have in mind will work properly. We recently posted an article showcasing Inspiring UI Wireframe Sketches and we received some inquiries abo

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N