XvfbとFirefoxとImageMagickでWebページのサムネイルを自動生成する方法 - pomo123の日記
いまさらながら感がありますが、XvfbとFirefoxとImageMagickを使って、Webページのサムネイルを作成する方法をまとめてみます。環境はVMWare上のUbuntuですが、インストールのところ意外はLinux系OSだと共通にできると思います。 概要 Xvfbで仮想フレームバッファ(X画面)を生成して、そこでFirefoxでサムネイルを生成したいWebページを開いて、画面キャプチャをします。キャプチャすべきURLをリストしたテキストファイルを元に、どんどん画像をキャプチャしていき、さらに画像を縮小してサムネイル化します。 環境 Vista SP1 + VMWarePlayer2.0.3 Ubuntu 7.10 (いろいろ手間を省くためにVMWare用のイメージを利用) インストール Synapticで以下のパッケージをインストールします。 xvfb imagemagick Fi
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
数千万のLINEユーザーにウェブページの情報を伝える魔法のボタン「LINEで送る」の作り方
数千万のLINEユーザーにウェブページの情報を伝える魔法のボタン「LINEで送る」の作り方 2012年10月12日 11:18ブログ 作り方というか、サービス公開のお知らせというか。 それは何 このブログにスマートフォン等でアクセスすると、 記事の下にこういうボタンが出るようになってます。 これをタップすると、こんなページに飛んで そこに何をすればいいのか書いてあります。 要するに上のボタンを押すだけ。 LINE がインストールされているスマートフォンで開けば 勝手に LINE のアプリが立ち上がるので、 あとは友達リストから相手を選ぶと ページの情報が勝手に挿入されるので その記事について知らせることができます。 「Facebook でシェア」ならぬ「LINE でシェア」ボタンです。 増大し続ける LINE の影響力 これを書いている時点でLINE の登録ユーザーは 世界6,500万人・
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
Webサービスを10日以内にリリースする方法をすべて書いたよ（「Gumad」編） - パパパパ
このブログは、僕がこれまでWebサービスを30くらい作ってきて、失敗したり成功したり色々体験していることをまとめています。 「Gumad β」は株式会社メーヴェの安宅（ディレクター）と杉本（エンジニア）の2人で、Gumroadの存在を知ってから9日間で作ったWebサービスです。作っている間にあったできごとや僕らの動きを公開したら、これから個人やベンチャーの人たちがWebサービスを作る人の（良い意味でも悪い意味でも）参考になるかもということで、少々こっ恥ずかしいですがブログに書き残しておこうと思います。 ちなみに、今回のシステム関連の話は「Gumadβで使ったgemまとめ」こちらに詳しく書かれています。 いまは「Gumad β」はミニWebサービス的な位置づけですが、もしGumroadやその周辺のサービスが盛り上がってくれば、面白い展開ができると考えており、ベンチャーらしく短期間でゲリラ的に
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
Webデザインや配色をサポートする新サービス「Croppy」をリリースしました | Stocker.jp / diary
Webデザイン Webデザインや配色をサポートする新サービス「Croppy」をリリースしました Wednesday, October 26th, 2011 WordCamp KOBE で私の講演をご覧になった方はご存知かと思いますが、Webデザインや配色をサポートする新サービス Croppy（クロッピィ） をようやくリリースしました。 Croppy にアクセスすると、このようなページが見れます。 色々なサイトのパーツが「ヘッダー」や「サイドバー」「ボタン」などカテゴリ毎に並んでおり、ブブンデザインアーカイブ のように見えるかもしれません。 しかし、Croppy は集められたパーツを見るだけではなく「今見ているWebページをブラウザ上で切り抜き、手軽にスクラップできる」のです。 Twitter または Facebook アカウントで Croppy にログインしたあと、気になるデザインのサイト
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
webデザインに必要なアイコンが全て揃うアイコンセット「500+ web icons pack」
ページ移動が必要なwebページを快適に閲覧してもらうために重宝する素材アイコン。WEBサイトの内容によっては、分かりやすく表現するために多くの種類のアイコンが必要になります。そこで今回紹介するのが、webデザインに必要なアイコンが500個もまとめられたアイコンセット「「500+ web icons pack」です。 上記のとおりシンプルで使いやすいデザインのアイコンセットとなっています。 詳しくは以下 「500+ web icons pack」には、ホームや設定・電話などを表す一般的なUIを示すアイコンはもちろん、大型ショッピングモールに表示されているような案内アイコン、ビジネスシーンで使いやすい時計やグラフを示すアイコンなど、生活のあらゆる状況がアイコンとしてセットになっています。 シンプルなシルエット素材になっているので、流行などに関係なく利用できるというのが嬉しいですね。PSDデータ
顔のニキビを一刻も早く治す効果的な方法
顔のニキビを一刻も早く治す効果的な方法 大事な日が控えている時に限ってできてしまうこと、ありませんか？ ニキビができてしまうと、それだけで気分も落ち込み、印象も大分変わってしまいますよね？ 私も最近まではチョコチョコニキビができてしまうことがありました。 最近は以下の対策をすることで、劇的にニキビに悩むことが少なくなりました。 よかったら参考にしてみてください。 【YouTube】赤ら顔を治す方法こちら 顔のニキビの原因 まずはニキビができてしまった原因を特定しましょう。 ニキビの原因は様々です。 食生活の乱れ、角質の汚れ、メイクがきちんと落とせていない。 乾燥によるニキビ、または疲れが溜まっていたり、ストレスが溜まっている場合、ホルモンのバランスが崩れている場合などが挙げられます。 自分のニキビの原因が何なのかを知ることもとても大切です。 対処法その１ 原因が分かったら、その原因を排除し
国内の良デザインなWeb制作会社を専門に掲載しているWebデザインギャラリー・「魅せるWebデザイン」 - かちびと.net
珍しいなー、と思ったのでご紹介。日本の Web制作会社さんのコーポレートサイトを 専門に収集しているWebデザインギャラリー 「魅せるWebデザイン」です。まだ数が多い 訳ではありませんが、なかなか見ないタイ プなので良い刺激になるかもですね。 こういうデザインギャラリーは珍しいですね。地域別になっているので同じ地域なら交流相手を見つけたりも出来るかも。良い刺激になりそうなギャラリーサイトかもですね。 シンプルで見やすいです。どうしても東京が多くなっちゃいますけどまだサイト開設して間も無さそうなので自社サイトに自信がある方はコンタクトを取ってみては如何でしょう。 僕もギャラリーサイトを運営していますが、一人で探すのはなかなか難しいのです。 例 福岡のcoralqualia（コーラルクオリア）さん 広島県のアクシスさん 福岡、大分のCONDENSEさん などなど。まだまだ数は少ないですけど、
[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary
私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。 たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。 なぜスケッチが必要か？ 多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。 なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。 デザインは、ソフトが自動的にやってくれるものではありません。 自分の力で1から作る必要があるのです。 そのために、「良いデザイン」とされてい
![[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab5cbd3dd1186ff326b5535187635828fcee5c0/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2F8c4a9bf2a4c1d3459b7f3b5db1bf2eb5-500x304-1.png%3Ffit%3D500%252C304%26ssl%3D1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
Cocktailz
CookieのDomain属性は *指定しない* が一番安全 - ockeghem(徳丸浩)の日記
