先月、瀬戸内国際芸術祭と小豆島グルメを楽しみに、小豆島を旅しました。 その時参考にしたサイトの中で、作りが素敵なふたつを紹介します。 小豆島旅ナビ 小豆島の観光案内。観光施設・飲食店・お土産・宿泊施設など、小豆島の情報満載。 サイトの特徴 小豆…
Canvasのサンプルプログラム RGBのランダムな組み合わせで色を変えて、線を引き続けるプログラムです。 DEMO <html> <head> <meta charset="UTF-8"> <title>HTML5でCanvasを使う</title> <script> (function() { window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 500; c</meta></head></html>…
ロゴ会社のブログで、各有名メーカーのロゴタイプの変遷をインフォグラフィックにしたものが、掲載されていました。 時代の流れと共に変わっていくロゴが一目でわかります。ひとつの会社だけを見るのではなく、こうやっていくつものロゴの変化をみると、それ…
Webデザインの参考に！デザインが秀逸な大学サイト10選 今回、おしゃれな大学サイト10選というブログを見つけました。 たくさんあるコンテンツをうまくまとめるお手本として、大学のWebサイトはよく見ていたので、他の人がどんな10校をあげるのか興味津々。 …
3月の4週目週末に、東京近郊に住んでいたら絶対行きたいアートイベントが開催されます。 その、公式サイトを集めてみました。 それぞれの特徴が出たWebサイトになっていると思います。 六本木アートナイト 六本木アートナイト 開催概要 日程：2013年 3月23日…
アメリカのシカゴ、英国ロンドンと、寒い場所を経て、 ただいま南アフリカのケープタウンにいます。 本来のブログが書けていないのは、そんな訳で・・・
福岡市内の猫と住める賃貸情報サイト ネコと一緒に暮らせる賃貸物件を探す人にターゲットを絞ったサイト。 ほのぼのとした手描きのビルボードが、サイトの雰囲気を決定しています。ネコ好きな人なら、「自分たちの気持ちをわかってくれるこの不動産さんから…
主要SNSの画面レイアウトサイズ Facebook Twitter Google+ YouTube LinkedIn Pinterest 上記SNSの画面レイアウトをまとめた記事がありました。 2012年11月の状況なので、現在もこのままかどうかは不明ですが、参考にはなると思います。 The Ultimate Complet…
<html> <head> <meta charset="UTF-8"> <title>九九表</title> <style> body{ margin: 50px; } table { border: 1px #000000 solid; border-collapse: collapse; } th,td,tr { border: 1px #000000 solid; padding: 5px; } th { fontstyle: bold; background-color: #ccc; } </style> </head> <body> <h3>九九表<…</h3></body></html>
BVD ― Simplify to Clarify 何も小細工しない美しさ、圧倒的なわかりやすさのWebサイト シンプルに自分たちの作品を見せ、導線に迷いがありません。 自社サイトで奇をてらったことや技術力を見せつけることをしないのは、自分たちの生み出す作品に自信がある…
デザインを扱うブログのトップ100をランキングした記事があったので紹介します。 Alexaランク Twitterフォロワー数 Facebookファン数 で、ランクを集計しているようです。いくつかをちょっと見てみただけなのですが、ブログデザインや写真・イラスト・インフ…
Webサイトがブックマークレット「Wirify」でモックアップに Webサイトからワイヤーフレームを生成し、Webデザインの勉強に役立てられるブックマークレット「Wirify」です。 Wirify 使い方 「Wirify」をブックマークツールバーに入れます モックアップしたいW…
カンクンから行くイスラ・ムヘーレス島 Webデザインを離れてメキシコ旅行中です。 カンクンから高速艇で行ける、イスラ・ムヘーレス島に来ました。 メキシコも北半球で冬ですが、冬とは思えない天候です。メキシコは自然も、アートも面白い場所です。 （もち…
Best of Web Design in 2012 | Inspiration Best of Web Design in 2012 | Inspiration で紹介されていた中で、私も好きなサイトをあげてみます。全体的に、すっきりめのデザインが多いです。 Best of Web Design in 2012 | Inspiration Foundry Collective:…
「WordPress 3.x現場のワークフローで覚えるビジネスサイト制作」という本を使ったサイト制作は地味に進行中。年末年始、離島のクモの糸のように細い回線はより細くなり、ADSL基地局から離れた我家は、ダイヤルアップ時代の速度も出ないというか、完全に回線…
WordPress 3.x現場のワークフローで覚えるビジネスサイト制作 本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサ…
「この画像のイメージっていいな」と思った時に、画像から自動的に色を抽出してくれるカラーパレットを4種類ご紹介します。 自分のイメージを膨らませるのにもいいし、実際のWebサイト制作にも使えると思います。 Color Palette Generator Color Palette Gen…
スクリーンショット（キャプチャー画像）をとる Webデザイン勉強中で、Webデザイン系のブログを書いていると、Webサイトのスクリーンショットを取る機会が多いと思います。 方法はいろいろありますが、私は以下を使うことが多いです。 窓フォト ・・・フリー…
Wix.comがついに日本語で新登場 Wixは、イスラエル生まれの無料オンラインウェブサイト作成サービスです。 テンプレートを選んで、簡単なドラッグ＆ドロップでサイトをカスタマイズするだけで、まるでプロ顔負けのWebページが作成できます。 ただ、英語やド…
jQueryのレスポンシブ・スライダーが使いたい時のために、メモしておきます。 ◆基本的なjQueryイメージスライダー シンプルで軽量な、jQueryイメージスライダーです。 ソースのダウンロード ◆レスポンシブサムネイル ギャラリープラグイン サムネイルがコ…
スマートフォン・ソーシャルメディア・WordPress 昨日、うちから一番近い図書館に、このインプレスムックがあったので借りて来ました。書店で見て、「買いたいけど高いなぁ」と思っていた雑誌です。 一番近いと言っても、「車10分＋フェリー30分+車30分」か…
liteAccordionのバリエーション 普通に目にするサイトで、この横スライドメニューを使ったサイトを見かけなかったので、記録しておきます。 (単に私が目にしなかっただけだけです）Hilton HHonors™ - MyWay Benefits Gold
Parallax Slider with jQuery 使ってみたいスライダーなので、メモしておきます。 DEMOサイト HTML <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"> <div class="pxs_bg1"></div> <div class="pxs_bg2"></div> <div class="pxs_bg3"></div> </div> <div class="pxs_loading">Loading images...</div> </div>
CSS Swinging Panel Menu 以前、画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシートでも感じましたが、CSSで指定して動くというのはすごく面白いです。 ナビゲーションにカーソルをあてると、下記の黒いパネル部分がひらひら揺れてから止…
Mondrian - HTML/CSS Facebook Template 海外のテンプレート販売サイトThemeforestを眺めていたら、いかにもMondrianなテンプレートを見つけました。 白、赤、黄、青の四角を、太めの黒の枠線で囲んだら、たちまちモンドリアンになります。 モンドリアンの絵…
【HTML5_A01】 DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>【HTML5_A01】</title> </head> <body> <section> <h1>日記</h1> <time datetime="2012-11-16" pubdate="pubdate">2012年11月16日</time> <p>今日は、冬休みに行きたい旅行先をピックアップした。</p> <ul> <li>メキシコ</li> <li>南アフリカ</li> </ul> </section> </body>…</html>
WhatFont Toolとは WhatFont Toolは、サイトを閲覧していて「このフォントは何を使っているんだろう？」と思った時の疑問に答える、Google Chromeの拡張機能です。 WhatFont Tool 上記サイトから、Chromeの拡張機能、またはブックマークレットでお試しくださ…
FacebookのLikeboxコードをゲット Facebook Likebox 設置のページ このページで自分のURLを入れて、コードを生成します。 Get Code のボタンを押すと下記のポップアップが出ます。HTML5、XFBML、IFRAME、URLがありますが、IFRAMEを選びます。 Google Gadget…
reframe.ccを使ってみる Wireframe.cc 初期画面実際にさわってみました見たまま直感でワイヤーフレームがサクサク作れました。 シンプルで簡単に操作できるのが良いと思います。URLが発行され、共有した人が誰でも編集できるのも便利です。 高機能ではないけ…
Gunosy（グノシー）って何？ Gunosy（グノシー）は、TwitterのツイートやRTの内容、FacebookのLike情報や、はてなブックマークの情報などのデータから、興味や関心を分析して、1日一回ニュースを届けるサービスです。 Gunosy Gunosyについて書いているブログ…
