浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

web

identiconの作り方

GitHubとかで、ユーザーのトレードマークみたいな模様がありますね。 こんなかんじの幾何学模様です。 この模様の正式名称は、「identicon」というそうです。 identiconを作る方法を調べて、自分のWebサービスでも利用できないか?調べてみたいと思います。 …

Google Adsenseの関連コンテンツユニット

最近、Google Adsenseの広告で、記事のリンクと広告が混ざった形で表示されているタイプをよく見かけます。 こんなかんじの広告です。 (例)http://www.siminpc-kitakyushu.com/index.php?QBlog-20121201-1 2行4列で8個のリンクがあり、上段の左から1番目と…

広告を花に変えるブロッカー「Green Screen」

面白いアイデアの広告ブロッカーがありました。 greenz.jp 「Green Screen」という広告ブロッカーを使うと、Webページを閲覧したときにバナー広告が花の画像に入れ替わります。 greenscreen.thegreengallery.com Chrome用のプラグイン Green Gallery - Green…

幼児向けのプログラミング絵本

プログラミングの教材はいろいろありますが、「Code Babies Books」という幼児向けの絵本がありました! 「その発想はなかった!」というかんじで、いろいろスゴイです。(笑) www.itmedia.co.jp 中を見ると、大きな文字でカラフルにコードが書かれているの…

JavaScriptでマトリックスコード風のアニメをWebページの背景に表示する方法

web

Webサイトの管理画面を作っていて、デザイン的に「無味乾燥だよなー」と感じました。 そこで、彩りを添えるために、視覚的なエフェクトを付けてみようと思いました。 ●サイバーパンク 管理画面で気分をアゲるには、デジタルなサイバーパンクが合ってるかな?…

最小限の労力でWebサービスを作るノウハウ

web

Webサービスを作るとき、「あれも欲しい」「これも欲しい」と、機能をたくさん付けようとして欲張ると、制作に時間がかかってしまい、なかなかリリースすることができません。 必要な機能を絞り込み、最小限の構成にすると、制作時間を短縮できます。 hamamu…

ニールセンのユーザビリティ10原則

デザインを修正するときのコツが紹介されていました。(メモ) www.yasuhisa.com 私たちは論理的に考えようとしますが、感情的に物事を捉える生き物です。 どうしても「好き」「つまらない」といったリアクションを即座にしてしまいがちですが、「好き = 良…

ぼかした画像を鮮明にするJavaScriptのスニペット「Cursor Traits」

web

Webページのアニメーションとして、スクラッチカードのような「Cursor Traits」という面白いスニペットが紹介されていました。 設置方法がよく分からなかったので、設置のテストをしてみました。(メモ) photoshopvip.net Cursor Traitsスクリーンをこする…

デザインスプリントの調査

web

Webサービスの作成をもっと早くしたいです。 Googleがやっている「デザインスプリント」という方法を参考にしようと思い、ちょっと調べてみました。 デザインスプリント - Google 検索 thebridge.jp ・1日目:関係者を集め、これまでの経緯、現時点で認識し…

Webページでスクロールバーのずれを解消する方法

web

Webサイトを作っていると、縦が長いページと短いページで、スクロールバーの分だけ横幅が違っている場合がありますね。 この横幅の違いによって、ページ上の配置物がずれて見える場合がありますが、スクロールバーを常に表示させる設定にすることで解消でき…

Google Fontsの使い方

かわいいフォントを使っているWebサイトがありました。 ・Sidr - A jQuery plugin for creating side menus どうやって表示しているのか?を調べたら、Google Fontsを使っていました。 WebFontConfig = { google: { families: [ 'Ranchers', 'Capriola' ] } …

JavaScriptでサイドメニューを隠す方法

Webサイトをリニューアルしていて、サイドメニューのパネルを出したり引っ込めたりする方法を使いたいと思いました。 Bootstrapの標準機能にはなかったので、Google検索したら、「Sidr」や「Scotch Panels」などのjQueryプラグインが、提供されていました。 …

スマホ重視のWebデザイン

web

Google Adsenseの活用事例で、フランスのオンライン教育サービス「digiSchool」が紹介されていました。 フランスの大手オンライン学習会社、モバイル対応で業績が大幅に向上 http://services.google.com/fh/files/newsletters/adsense_digischol_case_jap.pd…

CSSのブロック要素とインライン要素の違い

web

WebデザインでCSSレイアウトを復習。(メモ) HTMLやCSSは、適当にやってきて、ちゃんと勉強した記憶があまりないです。 以前から使っていたので、何となく使えているけど、各バージョンの知識を混同している予感。。。(・∀・) ●HTMLやCSSの復習 基本情報…

WebサイトUIの3D化

今現在のWebデザインでは、2DのUIを作るのが主流だと思います。 しかし、Unityなど、3Dコンテンツを簡単に作れるツールが進化&普及してきたら、WebデザインでもUIを3Dにする事例が増えてくるのではないでしょうか? つまり、ゲームのような3Dのデザインが、…

Googleマテリアルデザインキット

WebデザインでCSSフレームワークは、もっぱら「Twitter Bootstrap」を使っていました。 モバイルファーストのサイト構築なら、「Googleマテリアルデザインキット」も良さそう。 ちょっとレスポンシブデザインを試してみたいと思います。 (via Material Desi…