素敵な小豆島紹介サイト2選

先月、瀬戸内国際芸術祭と小豆島グルメを楽しみに、小豆島を旅しました。
その時参考にしたサイトの中で、作りが素敵なふたつを紹介します。

小豆島旅ナビ

小豆島の観光案内。観光施設・飲食店・お土産・宿泊施設など、小豆島の情報満載。

http://shodoshima.or.jp/

サイトの特徴
  • 小豆島観光協会のサイト
  • 素朴なイラストで手作り風のイメージ
  • たくさんの情報を窮屈感なく、すっきりとまとめている
  • ブログが「豆子のまめナビ」だけあって、更新がマメ

きれいなものを、みつけに ー小豆島ガールー

小豆島で輝く女性の「きれいなもの」がいっぱい!

http://shimagirl.jp/

サイトの特徴
  • 小豆島ガールが、「多くの人に小豆島の魅力を知ってもらい、好きになってもらいたい。」と運営するサイト
  • トップページは小豆島ガールギャラリー
  • 小豆島ガールがブログできめ細やかに小豆島の魅力を発信

HTML5でCanvasを使う

Canvasのサンプルプログラム

RGBのランダムな組み合わせで色を変えて、線を引き続けるプログラムです。

http://island-web.jp/air/lesson/HTML5/canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5でCanvasを使う</title>
<script>
(function() {
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
 
        var ctx = canvas.getContext("2d");
 
        var n = 16;
        var i = 0;
        var j = 1;
        var r = Math.min(canvas.width, canvas.height) / 2;
        var color = "rgb(0,0,0)";
        var random = function(max) {
            return Math.floor(Math.random() * max);
        };
 
        (function drawLine() {
            ctx.beginPath();
            var x1 = Math.cos(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
            var y1 = -Math.sin(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
            ctx.moveTo(x1, y1);
            var x2 = Math.cos(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
            var y2 = -Math.sin(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = color;
            ctx.closePath();
            ctx.stroke();
            j++;
            if(j >= n) {
                i++;
                if(i >= n - 1) {
                    color = "rgb(" + random(256) + "," + random(256)
                                + "," + random(256) + ")";
                    i = 0;
                }
                j = i + 1;
            }
            setTimeout(drawLine, 20);
        })();
    };
})();
</script>
</head>
<body>
<canvas id="canvas" />
</body>
</html>

グローバルブランドのロゴ変遷

ロゴ会社のブログで、各有名メーカーのロゴタイプの変遷をインフォグラフィックにしたものが、掲載されていました。
時代の流れと共に変わっていくロゴが一目でわかります。

ひとつの会社だけを見るのではなく、こうやっていくつものロゴの変化をみると、それはロゴタイプのデザインについて、メインストリームとなる時代の流れがあるのだと理解することが出来ます。

ロゴは時代の流れと共に、シンプルになって来ました。
そして最近では、立体感を持ったロゴも増えて来ました。理由のひとつに、ロゴを掲載する媒体が変化してきていることがあげられると思います。

Logos Evolve12 Should A Logo Be Timeless?

An illustration by the team at The Logo Company

こうやって、一目でロゴについての理解を深めるインフォグラフィックの作り方も、大変勉強になりました。

大学のWebサイト

Webデザインの参考に!デザインが秀逸な大学サイト10選

今回、おしゃれな大学サイト10選というブログを見つけました。
たくさんあるコンテンツをうまくまとめるお手本として、大学のWebサイトはよく見ていたので、他の人がどんな10校をあげるのか興味津々。
10校は順不同なのかな。

武蔵野美術大学

http://www.musabi.ac.jp/

京都精華大学

http://www.kyoto-seika.ac.jp/

10校中5校は美大もしくはデジタル系大学なので、入るのは当然とも言えますね。
グリッドデザインが多いのも、数多いコンテンツを見やすく整理するのにふさわしいからなのでしょう。

ちょっとびっくりしたのは、自分の出身校が2校とも入っていること。
ひとつは現役の学生の頃で、ひとつは割と最近卒業しました。

また、大学サイトウォッチングは続けて、次回は自分の10選を載せたいと思います。

下記を参考に書かせて頂きました。

3月に開催されるアートイベント3選

3月の4週目週末に、東京近郊に住んでいたら絶対行きたいアートイベントが開催されます。
その、公式サイトを集めてみました。
それぞれの特徴が出たWebサイトになっていると思います。

六本木アートナイト

http://www.roppongiartnight.com/

開催概要

日程:2013年 3月23日(土)10:00〜3月24日(日)18:00
会場:六本木ヒルズ森美術館東京ミッドタウンサントリー美術館、21_21 DESIGN SIGHT、国立新美術館、六本木商店街、その他六本木地区の協力施設や公共スペース
料金:無料(但し、一部のプログラム及び美術館企画展は有料)

コアタイム3月23日(土)17:55[日没]〜3月24日(日)5:39[日の出]には、是非参加したいところ。

G-tokyo2013

http://www.gtokyo-art.com/2013/index.html

開催概要

日程:2013年 3月23日(土) 11:00〜24:00、3月24日(日) 11:0〜19:00
会場:東京ミッドタウン・ホール
料金:一般 1200円、学生(高・大)1000円、4歳〜中学生:600円(当日限り有効)

アートフェア東京

http://artfairtokyo.com/

開催概要

日程:2013年 3月22日(金)11:00〜21:00、3月23日(土)11:00〜20:00、3月24日(日)10:30〜17:00
会場:東京国際フォーラム 地下2階 展示ホール
料金:1-DAYパスポート2000円 3-DAYパスポート3500円

ターゲットを絞った不動産サイト「NEKOBEYA」

福岡市内の猫と住める賃貸情報サイト

ネコと一緒に暮らせる賃貸物件を探す人にターゲットを絞ったサイト。
ほのぼのとした手描きのビルボードが、サイトの雰囲気を決定しています。

ネコ好きな人なら、「自分たちの気持ちをわかってくれるこの不動産さんから物件を借りたい」と思うでしょう。ターゲットの目線に立ったサイトだと感じます。

http://nekobeya.net

運営会社であるきりん不動産や一般物件を扱うきりんアパートメントのサイトも、一般的なイメージの不動産サイトから離れたゆるい感じの作りです。波長の合う人を限定しながらターゲットを絞る不動産サイトは、珍しいですね。