皆さん、ブログでやられてるので試験的に僕も始めてみました。自分がツイートしたモノ等のまとめです。 自分で見返すのに確かに良いなぁと思って。今回は初回なので大量（しかもまだ2月の途中だし） 記事 有名ブランドのデザインリソースを使用する上で参考になる『Guideline Colours』 - K’conf http://t.co/pSwFu1AX (これは素晴らしい) コカコーラがカードなしで100ユーロ引き出せる「幸せのATM」を設置　条件は“幸運を人と分かち合うこと” | IRORIO（イロリオ） – 海外ニュース・国内ニュースで井戸端会議 http://t.co/90XiLUly （なんか感動しちゃった） イラストレーターだけど画面から飛び出したい « haptic blog http://t.co/M1tfbSnm （飛び出しましょ :)） 高級チョコレートブランドGO

いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });

個人的に気に入ったフリーフォント集。フリーじゃないのもありますよ。 FACUNDA FREE FONT http://bybu.es/portfolio/facunda-free-font/ LSTK GaraPen Tiny http://www.behance.net/gallery/LSTK-GaraPen-Tiny-FREE-FONT-DOWNLOAD/5556992 Bokeh Font http://www.behance.net/gallery/Bokeh-free-font/5537207 Nickname – Handwriting Web Font http://wegraphics.net/downloads/nickname-handwriting-web-font/ Higher – Free Font http://www.behance.net/ga

なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli

僕はただのWebディレクターです。 いわゆる電話かけたり等のファインディングという意味では営業活動はしていません。 しかし、相談を受けたり、紹介頂いたり、過去の実績からお声がけ頂いたりという形でご連絡を頂くことは多いです。 単にディレクションだけというのは面白みも無く、代理店の方とプランニングをして提案を持ちかけたり等、そういった意味での営業活動はしています。 プロデューサーっていう言葉も出てくるわけですが今回は置いておいて。 そんな業務の中、自分の中で営業感度として気をつけている点がいくつかあるんですが、その中で今回は「世代感」というのを書いてみます。世代。ジェネレーションです。 ジェネレーションギャップ 気をつけている事は、とにかくジェネレーションギャップが無いかを気をつけます。 ギャップをつけるとかって意味ではなく、どのようなギャップがあるかを気をつけています。 世代

CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。詳しく知りたい方はこちら PUTTING CSS CLIP TO WORK: EXPANDING OVERLAY EFFECT / Codrops http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/ メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い

メモリ食いますしグラボによっては使えないそうですが、皆さんGPU/OpenGLって使ってますか？僕は一応使ってます。使いこなせてないと思いますが。けっこう便利な小技が揃ってるので、個人的に気に入った機能をまとめました。使った事無い方は是非一度お試しください。 それと、3Dが出来るのは大きいかもしれないですね。使い方によっては面白い装飾が作れます。 が、3Dに関しては知識不足の為、省きます。 CS4から、あるいはCS5から導入された物が散らばってますが、 僕の環境が5.5なので5.5前提で書いていきます。ちなみにWinですが、Macも部分併記。 それと、恐らくCS6は微妙にどこか違うはず。6での追加機能も特に調べて無いです。 なんだよCS6書けよとご不満の方、CS6買って！CC1年でも良いです。ぜひ！ フリップ スマホ的な感じで、するするーっと動くようになります。 [Spac

樹林伸さんって皆さんご存知ですか？ 『金田一少年の事件簿』『神の雫』などのヒット作を作り続けている漫画原作者です。 元は講談社に務めていたとか。 「週間少年マガジン」の『シュート!』『GTO』などの編集を担当。 その後、原作者として『サイコメトラーEIJI』『BLOODY MONDY』などを手がけ、作品では自分の名前を「安童 夕馬」「青樹 佑夜」「天樹 征丸」「有森 丈時」「伊賀 大晃」「龍門 諒」「S.K」等と、その都度違う原作者名で出しているユニークな方。 更に木村拓哉主演のドラマ『HERO』の原作も手がける。その敏腕ぶりは逸品。 そんな樹林さんが、日テレの「心ゆさぶれ！先輩ROCK YOU」で、独自のノウハウを連発していました。その言葉が、とても響く内容で、我々クリエイターのまさに”心をゆさぶる”内容でした。 飽きたらやめちゃう ページ送りの手間があるので、読者はページの最

電車広告を眺めるのはクリエイターの日課ですよね(えっ、僕だけ？) 電車の広告、特に棚上広告は横にびっしりと並んでますよね。隙間無い程(電車によっては隙間あるモノもありますけど、、) 他にも電車だけでなく、町中に貼ってあるポスターや街頭広告。 基本、真隣でなくとも広告枠の領域は、当然の事ですが広告が並びます。もちろんクリエイターは、それを見越して、よりインパクトのあるグラフィックを狙いますよね。 時には派手に、時には大きく。なんとかの背比べみたいになってる広告群もありますね。 でもそれって、どうなんでしょう？ 目立たせるだけでは意味を成さない気がします。 ポスターは、より簡潔に、そして完結に、物事を明確、かつ適切で心に響くモノが理想的です。見る人の記憶に残るのが目的であって、インパクトだけでは単なるエグい広告「群」になるだけかなと。 更にいうと、描かれている形状も気になります

本当は書くの嫌なんですが、あえて突っ込んでみました。 こういうのは個人的考えを出し合って理解を深め合った方がより良いと思ったためです。 前回は、UXデザインという切り口で書きましたが、ふわっとした印象のUXについて、個人的に重要としている点を挙げていきます。UXの根本的なところは色んな所で書かれてますので、UXとはなんぞや？というようなモノは省きます。 まず前提として、UXは「体験や感情」という人の本質部分の背景的な考察、 更に「不変的な事実」、そしてフロントの「UIへの適用」が重要ファクターだと考えています。 これらを掘り下げて説明する能力も無いわけですが、我々が慣れ親しんだ部分で言うと、 わかりやすいところ以下の3つがあるかと。 1. 今までの体験 「今までの体験」という点をデザインに取組む、これは「デザイン」の原点的なモノだと考えています。 以前にも書いたんですが、デ

僕はある会社でディレクターを担当しているのですが、月に数本、何かしら納品しています。時にはリニューアルだったり、時には部分的だったり、時には新規構築だったり。そして、時には制作をしたり、時には外注さんへの指示出しだったり、スケジュール管理だったり、大体の事を噛んできます。その都度、様々な方々と一緒にプロジェクトを進め、色んな部分を調整するのですが、納品を行うには色んな困難があります。「依頼のあった物を作り、納品する」一見シンプルですが、本当に難しいです。 今回は「納品」についてのお話し。 納品時ではなく、いかに納品までスムーズに持っていけるか、という点についての1つのポイントです。 とにかく納品を成功させるには・・・ 1に納得感。2に背景。 単純に「クオリティの高さ」もありますが、先方（担当者）の納得感は私たちが考える一般的なクオリティとは少し違った視点で存在する事も多いです。例え

10月15日より、デザインを少し変更しました。 全体的なテイストは変わらずですが、レイアウトをシングルカラムに。 まず前提として大きな理由の1つは「飽きたから」 なんとなく普通の設計が飽きちゃったなぁーというのが大きな理由です。なので「前が良かった」のは正しいご意見というか、一般的にはその方が良いのかもしれません。このブログは広告収入やPVを上げることが目的では無いので、色々含めてどんどんチャレンジしていきたいです。マンネリ解消という感じで手を加えてみました。最近の流行りに乗っかった感ですね。前からちょくちょくデザインを変える癖がありますが、そこも含めてお楽しみいただけれたら幸いです。 近いところで言うと、Webデザインレシピ さん とか、記事本文だけシングルでトップやカテゴリーなどのリスト部分はサイド出した形です。アイキャッチになる画像は横いっぱい使ってインパクトあって良いですよ

※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。 なかなか動かなくてハマリました・・・動画やっぱこわい。。 タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。 何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。 用意する動画は mp4　：　Chrome・Safari・IE9 ogv　：　Firefox・Opera webm　：　Chrome・Opera という具合。 更に、もちろんHTML5をサポートしていないブラウザも有り。 動画の変換ですが、僕はこのツールを使いました。 XMedia Recorde http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html (窓の社） 読み込んで形式を選択してエンコードボタンをクリ

少し古い調査結果ですが、面白いなと思ったので書いておきます。 ブログをやっている方へのインターネットアンケート調査の結果です。 調査結果データは全てLifeMediaさんより引用 テーマ：ブログに関する調査 調査結果：有効回答 1200件 調査期間：2010年9月17日から9月24日 対象者：ブログを開設している10代～60代の全国男女 調査サマリー 開設期間は、「1～2年」17.8%、　「2～3年」16.9%　と1～3年が多い 1日の平均アクセス数は、80%が50以下(わからないも含む) アクセス数500を超えるブログは1.7%。 半数以上のブロガーは週に１回以上、更新をしている。 アクセス数が500を超えるブロガーは52%がほぼ毎日更新をしている。 ブログを書く目的は「自分の日記、備忘録として」が最も多く63.5%。 ブロガーのTwitterの利用率は3割を超える。

意外に知らないんだなーと思って。 Meiryo UI はWindows7から登場したメイリオフォントの改良（もしくは派生）版です。 メイリオはVistaからですね。 このブログはヒラギノの次にMeiryo UI 、次にメイリオ指定です。 どちらが良いのかは個人差分かれると思います。 大きな違いはカナと文字詰め。 Meiryo UI のカナは半角と全角の中間？というくらい Narrow な感じ。 文字間も詰められていて、これを使うと、かなり全体的に詰まった印象です。 メイリオは一応プロポーショナルフォントらしいですが、和文が等幅なので感じられず。 カナが入ると、かなり横幅が変わってきます。 このようにまとまった文章で見比べると、テキストのボリューム感もだいぶ違いがわかります。 ブラウザでの見え方はこんな感じ しまった・・・英字はArialで表示されてます。 同様の事

定義がいまだ曖昧 何を指して「レスポンシブ」なのかと。 モバイルファーストという考え方は素晴らしいです。レスポンシブとするならば、やはり制限のあるスマホでの閲覧は考えるべきで、そこにどうアプローチできるかは優先的に考慮しなければ、そもそもRWDを取り入れる必要性は無いわけですから。 いや、スマホでのアクセス見込みは切り捨てで、おまけ程度で見せたいからRWD採用って手も無くは無いか・・・ 極端な話、こういったサイト、プロジェクトならばPC閲覧時のデザイン、装飾は極限までにそぎ落とし、スマホ閲覧時にどれだけ快適にできるか、つまりPCサイト（PC表示時）はシンプルで良いんじゃないかなと思います。（この時のポイントは企画段階時のRWD導入の見極めかなと思います） しかし、PC閲覧の最適化が後回しになり、最終的にPC閲覧時、特にまだまだ使用率の高い解像度1024、1280（共に横）などでの閲

機械的でごめんない。サイト名は割愛させていただきます。掲載内容・順番に深い意味は特にありません。 お金もらって書いて、とかそういうのでも無いっす。 デザイン / 参考 【クリエイター必見】創作意欲が湧くデザイン 参考になるWebデザインリンク集まとめ Webデザイナーなら押さえておきたい、今月の優れたWebデザイン（2012年7月）まとめ11個 ハイクオリティな最近のパララックスWebデザインまとめ13個 ポートフォリオ作ろうぜ！参考サイト、リンクまとめ9つ 『さすがデザイナー…！』と思わされるクリエイティブな名刺デザイン集 配色のセンスをゼロから習得するために役立つスライドまとめ5つ GIFアニメを効果的に使ったサイトまとめ4つ ここまでするのか！アイデア満載の採用サイト おしゃれでかわいいポスターデザイン集 【デザイン】面白いアイディアの広告ギャラリーまとめ HTML5で書かれたス

11月といえば好きなブログを告白する月のようですが、それはまたの機会にして・・・ いつオープンしたかはわかりませんが、最近見つけたサイトで個人的にかつ直感的に「いいね！」と思ったサイトを不定期で更新していこうかなと思います。※画像クリックで拡大。サイトへはURLリンクからどうぞ。 La Grange http://la-grange.ca/ とにかく細部までこだわりを感じるポートフォリオサイト。 動画のセンスも凄く良いです。 5emegauche http://www.5emegauche.com/ 各ページにユーモアがあって凄く楽しめるサイト。 agence というページがユニークです。どうやってるんだろう？軽い衝撃。 Buses at the Brewery http://www.busesatthebrewery.com/ シンプルな構造だけど飽きさせない、上手く見

前回の続編です。 inquiry form creatorの後継のようですね。 色々変わっているので一応書いておきます。 inquiry form と比較 確認画面・サンキュー画面の文言を細かく変更可能 以前はフォーム部分だけだったと思うんですけど、冒頭に文言や画像を入れられるようになっていますね。これにより、フォームの説明や、サンキュー画面で他ページへの誘導などが可能に。 「必須マーク」など、細かく設定可能 画像なんかも指定できます。 CSSが管理画面上で編集可能 akismetと連動してスパム排除 各画面のHTMLが自由に編集可能 テーマフォルダにtrust-form-tpl-.php等と置いておけば読み込んでくれるそうです。 それぞれ「trust_form_show_input()」「trust_form_show_confirm()」「trust_form_show_f