緩衝地帯宣言。

2014年11月21日金曜日

ｊQueryを使って"ページの先頭に戻る"ボタンを作る

最近よくあるアニメーションに、下のほうまで行くと"TOP"みたいなボタンがあって、それを押すとページの先頭まで自動でスクロールする、というものがありますよね。

あれをjQueryを使って実装する場合、animateメソッドを使います。おおざっぱな実装ではこんな感じです。

$('#back_to_top').hide();
$(window).scroll(function(){
    if($(this).scrollTop() > 1000){
        $('#back_to_top').fadeIn();
    }else{
        $('#back_to_top').fadeOut();
    }
});
$('#back_to_top a').click(function(){
    $('body').animate({
        scrollTop: 0
    }, 400);
    return false;
});

ボタンのIDはback_to_topです。まずはscrollTopで現在のy軸座標を取得します。それに合わせて適当にshowやhideでボタンを表示します。

今回の前提としては、ボタンのpositionをfixedで指定しておき、画面読み込み時にはhideメソッドで隠しておく感じですね。そして適当にピクセル分スクロールダウンしたら、fadeInでふわっと表示させます。もちろん単純にshowでも構いません。

さて、UIに関することはこれくらいにして、とにかくポイントはanimateメソッドを使うことです。これは四角形なんかを変形させるときにも使えます。

scrollTopではなく、heightやwidthに値を指定しておくだけですね。

あとは第二引数で変化時間を設定しておけば、オリジナルのアニメーションを実装できるという具合です。もう少し複雑な引数もあるのですが、基本はこれだけです。

animateメソッドは簡単なアニメーションを手早く実装できるので、ぜひ使いこなしたい機能です。

2014年11月16日日曜日

File Dialogのボタンデザインを変更する

ローカルのデータを読み込む際に使用するFile Dialogですが、そのまま利用するとデザインを変更できません。

そこで、まずはそのダイアログを隠してしまい、別のボタンをクリックしたときのイベント内部で呼び出すことにします。仮のボタンを作ってしまい、それを加工するということですね。

今回は好きな画像イメージを表示するソースです。縦長と横長の写真が見栄え良く並ぶように、画像のサイズは適当に調整していますが、実際には画像ファイルであるかといった判定が必要になると思います。

jQuery File Dialog

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>jQuery File Dialog</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
            #file_dialog_field{
                height: 30px;
                width: 100%;
                margin-bottom: 20px;
            }
            #file_button{
                margin-left: 2px;
                width: 140px;
                font-size: 14px;
                font-family: Verdana, sans-serif;
                border-radius: 15px;
                background-color: rgba(207,247,94,0.8);
            }
            #file_text{
                width: 160px;
                background-color: rgba(207,247,94,0.2);
            }
            #file_show_area img{
                margin-right: 10px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!-- Not show file dialog. This is called in jQuery button function. -->
        <input id="file_dialog" style="display: none;" type="file">

        <div id="file_dialog_field">
            <input id="file_text" type="text" readonly="readonly" placeholder="Select your image"></input>
            <button id="file_button">Open your file</button>
        </div>
        <div id="file_show_area"></div>
        <script>
            $(function () {
                $('#file_button,#file_text').click(function(){
                    $('#file_dialog').click();
                });
                $('#file_dialog').change(function(){
                    var file = $('#file_dialog')[0].files[0];

                    var title = file.name;
                    $('#file_text').val(title);

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    //at the moment reader is ready
                    reader.onload = function(e) {

                        var img = new Image();
                        img.src = reader.result;

                        //ignore resizing small images. 
                        if (!(img.width < 150)){
                            //Get pictures appear well-balanced.
                            if (img.width > img.height){
                                img.width = 300;
                            }else{
                                img.height = 240;
                            }
                        }

                        $('#file_show_area').append(img);
                    }
                });
            });
        </script>
    </body>
</html>

2014年11月14日金曜日

ウェブデザインことはじめ

日頃デザインを行う際のポイントをまとめてみました。

どれも市販のデザインガイドを開けば載っているような当たり前のことですが、自分の言葉でも文章化しておきたいと思います。

レイアウト

①空間に基準線を意識して、ウィジェットや文字を配置します。
基準線は直線であったり、四角形であったりします。

②同族性のものはまとめます。これを一つのグループと考えます。これらのグループを、基準線に沿って土台(ページ)に配置します。
グリッド構造をイメージすると分かりやすいかもしれません。グループ内でも基準線を意識して見やすさを重視します。

③グループ間の距離をある程度、等間隔でとりながら、それらを反復することで統一感を出します。

④情報の優先度に従って、グループやウィジェットに差異をつけましょう。大きさや濃淡、文字の太さなどで表現可能です。

⑤視線の動きを表した、いわゆるZ線に沿った配置も心掛けなくてはいけませんね。

配色

①用意する色を三種類とした場合、割合は以下のようになります。

ベース: メイン: アクセント = 7: 2.5: 0.5

背景色(ベースカラー)、ボタンや文字などによるメインコンテンツへの誘導(メインカラー)、特売情報、新規情報、特典やサービスなど特に印象を与えたい部分(アクセントカラー)といった具合です。

色の選択は、ベースとメインは概ね彩度で区別したりするのが簡単です。濃い紫をメインカラーにして、透明感のある薄い青紫をベース、といった感じですね。

ちょっと変えたいな、という時は色相を入れ替えてみたりします。

②三種類は少ない！　という時には、色を足します。ベースやメインのカラーを分割してみます。ただし、各コンテンツに対する使用の比率を変更してはいけません。

基本はトーン(色の強弱：彩度と明度で変化。brightness and darknessと書いた方が分かりやすかもしれません)と色相(いわゆる色)のどちらかを入れ替えることで対応します。

両方変えてしまうとたいていは違和感が出てしまいますね。。。なんだかチグハグな配色だなぁと感じる一番の原因かもしれません。

③アクセントはいわゆる補色を使ったりします。強い赤色に対するのは、目に痛いくらいの黄緑といった風に、機械的に決めることが出来ます。

まとめ

どれもデザインの基本ではありますが、独自のデザインを施すうえでも、基本からどこまでずらして良いのか、が一つの基準になると思います。

ただ、一番大切なのは、ウェブデザインはアートではなくて結局プロダクトデザインだよね、と忘れないことなのかもしれません。

jQueryのプラグインの力を借りてギャラリーを回して、インデックスは思いっきりパララックスでインパクト重視。。。なんて最近のブラウザなら派手に動かそうと思えばいくらでもできちゃうんですけれど、結局使う人が使いやすいかというUXの視点を忘れちゃいけないんですよね。

具体的な方法論というよりは心構えみたいなものですが、ふと迷った時にはいつでもここに帰ってこれるようにしておきたいと改めて思いました。