2013-11-14

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

Webサイト100

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

小豆島旅ナビ

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

サイトの特徴

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

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

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

サイトの特徴

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

2013-05-13

HTML5でCanvasを使う

作ってみた

Canvasのサンプルプログラム

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

DEMO

<!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>

nmi.jp Canvasの使い方より

2013-04-12

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

Webデザインの参考

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

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

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

Logos Evolve12 Should A Logo Be Timeless?

An illustration by the team at The Logo Company

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

2013-03-25

大学のWebサイト

Webサイト100

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

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

武蔵野美術大学

デジタルハリウッド大学

京都精華大学

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

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

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

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

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

2013-03-05

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

Webサイト100

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

六本木アートナイト

六本木アートナイト

開催概要

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

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