まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】

挫折のわけ

何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか?
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう

CSSフレームワーク

グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

bootstrap_ss foundation_ss

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
(※自分の勉強がてら)
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する

CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの

フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

 

Webページを作ろう

上に挙げたものをhead内に読み込みます。

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- CSS Framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css" integrity="sha256-DRcOKg8NK1KkSkcymcGmxOtS/lAn0lHWJXRa15gMHHk=" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha256-j+P6EZJVrbXgwSR5Mx+eCS6FvP9Wq27MBRC/ogVriY0=" crossorigin="anonymous" />

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Slick JS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

今回のページの内容

あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】

ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。

body {
    font-family: 'Noto Sans Japanese', serif;
}
.slider{
    max-width: 100%;
    overflow: hidden;
}
.slick-dots{
    position: static;   
}
.googlemap {
    position: relative;
    padding-bottom: 25%; 
    height: 0;
    overflow: hidden;
}
.googlemap iframe {
    position: absolute;
    top: 0;
    left: 1%;
    width: 98% !important;
    height: 100% !important;
}

Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。

$(document).ready(function(){
    $('.is-toggle').on({
        'click' : function(){
            $(this).toggleClass('is-active');
            $(this).next('.nav-menu').toggleClass('is-active');
        }
    }); 

    $('.slider').slick({
        autoplay : true,
        arrows : false,
        centerMode : true,
        dots : true,
        fade : true,
        infinite: true
    });

    $('a[href^="#"]').click(function() {
        var speed = 500;
        var pagelink_href= $(this).attr("href");
        var pagelink_target = $(pagelink_href == "#" || pagelink_href == "" ? 'html' : pagelink_href);
        var position = pagelink_target.offset().top;
        $('html, body').animate({ scrollTop: position }, speed, 'swing');
        return false;
    });
});

jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット

こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット

まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。(※1)

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット

これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか?ちょっとは違うサイトに見えますか?

まとめ

このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト


jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら
作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)
ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。



$(document).ready(function(){
     $('.button').on({
        'click' : function(){
            $('.target').fadeIn(500, 'ease');
            $('.target').css({
                 'padding-top' : '50px',
                 'padding-left' : '50px',
            });
        }
    });   
});


いまでは、このような使い方をすることが多いです。



//jQuery
$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    });   
});


/* CSS */
.target{
    opacity: 0;
    padding-top: 0;
    padding-left: 0;
    transition: all 0.5s ease;
}
.target.active{
    padding-top: 50px;
    padding-left: 50px;
}


jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う

CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。
Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。
それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。
終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。
on()は、clickやmouseenterなどの動作の時に命令を発動させます。
例では「click」イベントが起こったときに、



$('.target').fadeIn(500, 'ease'); //①
$('.target').animate({
     'padding-top' : '50px',
     'padding-left' : '50px',
}, 500, 'ease'); //②


の2つの命令をしています。
①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。
②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて

CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。
transitionは自動ではスタートしません。またループもできません。
しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。
transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。
キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点

CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。
もちろん、text-alignをleftからcenterにしてもアニメーションはしません。
数値を扱うものしか使えない、とおぼえておいてください。
先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。
※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。


.target-parent{
    position: relative;
    width: 100%;
    height: 200px;
}
.target{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(0) translateY(-50%);
    transition: all 0.5s ease;
}
.target.anime{
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

発火

これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。
CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)
もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。
そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。
例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').addClass('active');
    }); 
});


また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    }); 
});


さまざまなジェネレーターやライブラリ

自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。
そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。
作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。
Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。
たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。

参考サイト


IFTTT使って自動でGoogleスプレッドシートに記録していく

blog160809

Googleスプレッドシートを使ってますか?
仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。
使ってみると、それはそれで便利なものですよ。
そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。

例えばブログメディアを運用していると、記事のリストを作りたいときってないですか?
上司に急に言われて月間の更新数を出したり、Google Analyticsのレポートを作るときに記事の情報が必要だったり。
必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。
そんなときのIFTTTです。

IFTTTの説明はこちらでご紹介しています。
IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

ブログの更新記録を作る。

IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。

手順

チャンネルの登録は全部で7Stepあります。
全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。

Step0:トリガー

160809_01

「this」をクリックします。

Step1:チャンネルを選択する

160809_02

トリガーとなるチャンネルを選択します。
今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。

Step2:何をトリガーにするか

160809_03

Step2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。
チャンネル「RSS」では、「New feed item」「New feed item matches」の2種類を選ぶことができます。今回は「New feed item」を選択しました。

Step3:アクション

160809_04

「that」をクリックします。

Step4:チャンネルを選択する

160809_05

アクションさせるチャンネルを選択します。
Googleスプレッドシートを使いたいので、「Goolge Drive」を選択。

Step5:どんなアクションをするか

160809_07

Step4で選択したチャンネルで何が起きたらトリガーになるかを選択します。
Googleスプレッドシートに行を追加して行くので「Add row to spreadsheet」を選びます。

Step6:何をするのかを選択する

160809_08

Step6で選択したアクションの具体的な中身を決めて行きます。
内容は選んだチャンネルによって変わってきます。

この例では入力できる項目が3つあります。
「Spreadsheet name」はスプレッドシートの名前、「Formatted row」には記録する項目、「Drive folder path」はスプレッドシートまでのパス(フォルダー構成)です。
準備できたら「Create Action」をクリック。

Step7:確認・登録

最後に確認画面です。
ここでこのレシピのタイトルを変更することもできます。
OKだったら「Create Recipe」をクリック。
これでこのレシピがマイチャンネルに登録されました。

手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。

完成イメージ ※画像はイメージです
160809_10

これでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。
日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。

実はバックアップの代わりにもできる?

これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。
なので、簡易的なバックアップのかわりにもできます。
もちろんDBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。
記事データだけ加工して使いたいとか言う時は便利かもしれません。

方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。
入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。

160809_08_01

セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。

160809_08_02

他のトリガーでもいろいろできる

今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。
ここからはアイディア次第です。
TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。

何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。
リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。

以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。
Googleスプレッドシートと連携!Googleフォームを使ってみた。


最近ちょっと変わってきてる?ログイン画面について考えてみた

blog160705

SNS、Webサービス・・・
ログインする機会って結構頻繁にありますよね?
それで最近思ったのです、何か前と変わった気がする。。。
ログイン画面ではユーザー名(もしくはメールアドレス)とパスワードがワンセット。
だいたいテキストボックスが2個ならんでいるのが普通でした。

わかりやすいのはGoogleですね。
ちょっと前まで他と同じくテキストボックスが2個ならんでいる形でしたが、現在はメールアドレスの入力をして「次へ」でパスワードの流れになりました。


login_google01login_google03
初めのメールアドレスで入力ミスがあるとそんなアドレスは登録されていませんと怒られます。

login_google02

 

画面の遷移数とボタンを押す回数は多くなりましたが、一層手順の流れはわかりやすくなったように感じます。
また、項目が1個ずつになったので、自分がミスした場所が明確にわかるようになりました。

なんでこんな仕様になったのでしょうか?
中の人に聞かないとわかりませんが、この変更によってスマホの時にミスったときの操作がしやすくなっているように感じます。
メールアドレスとパスワードを入れてログインしようとしたら、メールアドレスにミスがあってログインできない。
こんなときPCだったらタブキーを利用したり簡単にカーソルを合わせられますが、スマホの場合もう一度タップしてテキストボックスをアクティブにして間違えた文字を選択して・・・
ちょっと面倒です。
ミスが起こった時に判定してくれれば、早めに修正して次の行動(パスワードを入力する)に行けるので、ログインする時には自分が成功したといういい気分でサービスに入っていける。
そういう心理的な達成感があるというのは深読みし過ぎでしょうか?

ちなみにYahoo!ではYahoo! Japanはこれまで通りメールアドレスとパスワードですが、yahoo.comの方では「メールアドレス」→次へ→「パスワード」になっています。

それではいろいろなログイン画面を見てみましょう。

Yahoo!

login_yahoojapan
Yahoo! Japan
login_yahoocom
Yahoo!

上述の通りYahoo! Japanとyahoo.comでは違います。

Facebook

login_facebook

位置がちょっと特徴的ですよね。Facebookは携帯番号を登録していればそちらでもログインできます。

Twitter

login_twitter

Twitterも「ユーザー名」+「パスワード」ですね。Twitterも携帯番号もしくはユーザー名でOK!

Instagram

login_instagram

Instagramも「ユーザー名」+「パスワード」。

Pinterest

login_pinterest

Pinterestも「メールアドレス」+「パスワード」。

Tumblr

login_tumblr01

login_tumblr02

Tumblrは「メールアドレス」→次へ→「パスワード」です!
Tumblrはオートコンプリート機能でパスワードまで一気です。

Evernote

login_evernote

Evernoteも「メールアドレス」+「パスワード」。

Simplenote

login_simplenote

Simplenoteも「メールアドレス」+「パスワード」。
実はログイン機能で引っかかるようになったのがこのSimplenoteなんです。
Simplenoteの場合、メールアドレスとパスワードを入力して不備があると、メールアドレスもパスワードも消去されてしまって1からやり直しになるのです。
これがまた面倒!!(←自分のメールアドレス間違うなって話)
Simplenote大好きなのに、ここがちょっと残念…

まとめ

思ったより「ユーザー名orメールアドレス」+「パスワード」の形が多かった結果になりました。
自宅のパソコンやスマホだと一度ログインしたらあまりログアウトすることもないかもしれませんが、会社のパソコンなどだとセキュリティを考えるときっちりログアウトしておくことが必要だったりします。(必要ならブラウザをシークレットモードで立ち上げましょう(笑)遊ぶのはダメですよー)
ログインの機会の多いサービスだと、ストレスなく使える方がいいですよね。
みなさんはどちらの方式がお好みですか?

自分で入力画面作るときも、使い勝手や心理的なストレス考えたらどちらがいいのか考える必要がありそうです。
ちなみにこのブログはWordPressですが、WordPressのログイン画面も「ユーザー名orメールアドレス」+「パスワード」ですね。