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

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

web

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

プログラミングの教材はいろいろありますが、「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…