<p>UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。</p>
<p>以前、下記記事にてツールを紹介しましたが（すごい簡単にですが）<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
(cometはまだ動きがないようですね・・・)</p>
<p>こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。<br />
しかもフリーで！！<br />
その中でいいと思った3つをご紹介します。</p>
<h3>ChatアプリのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch  InVision" width="640"  class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。</p>
<p>photoshopかsketchか選択してダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！<br />
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a></p>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これはデザイナーはもちろん、ディレクターにも良いと思います！<br />
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400"  class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<p><a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a></p>
<h3>高品質なECサイトのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample  Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらは無料ではTOPページのみになりますが参考になります。</p>
<p><a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>というかここのサイトがすごい。。。</p>
<p><a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>こういうの活かしながらより良いサイト制作に勤しみたいと思います。</p>


UIデザイン制作にすごい役立ちそうなフリー素材３つ

<p>Chromeの拡張機能の紹介です。</p>
<p>Chromeのデフォルトのダッシュボードを海外のweb,デザイン系のブログ・ギャラリーサイトのフィードを表示しちゃう機能です。</p>
<p><a class="link" href="https://chrome.google.com/webstore/detail/panda-4-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko" target="_blank">Panda</a></p>
<p>通常のダッシュボードは、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9688" src="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png" alt="スクリーンショット 2016-02-23 16.10.54" width="630" height="390" srcset="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png 1024w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-300x186.png 300w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-768x476.png 768w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-228x141.png 228w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b.png 1027w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こんな感じのgoogleのページだと思うのですが、</p>
<p>この拡張機能をインストールして有効化させたら、<br />
以下のようなページがデフォルトとして表示されるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9693" src="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png" alt="スクリーンショット 2016-02-23 16.17.37" width="630" height="427" srcset="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png 1024w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-300x203.png 300w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-768x520.png 768w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-228x154.png 228w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>初期はこんな感じで、左側がニュースのリスト、右側がギャラリーというレイアウトなのですが、<br />
以下のように変更もできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9694" src="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png" alt="スクリーンショット 2016-02-23 16.19.12" width="630" height="425" srcset="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png 1024w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-300x202.png 300w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-768x518.png 768w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-228x154.png 228w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>有名なサイトばかり揃っており、自分で選択もできるので非常に良いです。</p>
<p>忙しいとサイトを見に行くことを忘れてしまうこともあると思いますが、<br />
これがあれば自然に目に入ってくる可能性が高いのでおすすめです!!</p>
<p>これの日本verが欲しいな・・・</p>


デザイナー必須!?のChromeのエクステンション「Panda」

<p>フリーランスになりたい！</p>
<p>というわけではないですが、このサイトに掲載されているツールはフリーランスに限らず、<br />
普通に便利なツールが載っています。</p>
<p>カラー関連、アイコン関連、フォント関連、写真関連、等々多くのサイトが一覧にまとめられています。</p>
<p>写真関連のサイトが多いですね〜</p>
<p><a href="https://www.hellobonsai.com/best-freelance-tools" class="link" target="_blank">Best Tools for Freelance Designers and Developers | Bonsai</a></p>
<p>以前、デザイナー向けツールのサイトの紹介もしていました。</p>
<p><a href="/designer/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e5%90%91%e3%81%91%e3%83%95%e3%83%aa%e3%83%bc%ef%bc%86%e6%9c%89%e6%96%99%e7%b4%a0%e6%9d%90%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88%e3%80%8cma.html" target="_blank" class="link">デザイナー向けフリー＆有料素材まとめサイト「Makerbook」 | スターフィールド株式会社</a></p>


フリーランスのデザイナー＆プログラマーにとって便利なツールのご紹介

<p>photoshop ccやsketchでも使えるというプラグインです。</p>
<p>UI designを助けてくれるという触れ込みです。</p>
<p><a href="http://labs.invisionapp.com/craft" class="link" target="_blank">Craft by InVision LABS</a></p>
<p>以下の流れは基本「Photoshop」での話になりますのでご了承下さい。</p>
<h2>Craftのインストール</h2>
<p>まずは公式HPへリンクし、インストーラーをダウンロードします。<br />
windows/macは自動で判断しますので迷うことはありません。</p>
<p>インストーラーをダウンロードしたら起動します。<br />
そして、「sketch」か「photoshop」のどちらをインストールするか選択します。</p>
<p>これでインストール完了です。<br />
（photoshopを再起動させれば、エクステンションに追加されています。）</p>
<p>こちらのプラグインには、<br />
「Duplicate」「Type」「Photos」<br />
と大きく3つの機能があります。</p>
<p>簡単にはなりますがちょっとずつ説明していきます。</p>
<h3>Duplicate</h3>
<p>要素やシェイプを複製できるもので、ギャラリー等の制作に最適かもしれません。</p>
<p><a href="/uploads-archive/2016/02/6ap6Jo4mVg.gif" target="_blank"><img decoding="async" src="/uploads-archive/2016/02/6ap6Jo4mVg.gif" alt="6ap6Jo4mVg" width="640" class="alignnone size-large wp-image-9541" /></a></p>
<p>まず一つ元となるものを作り、それを選択し、<br />
縦、横にいくつ、<br />
どのくらいのマージンで、<br />
複製をするのかを決める感じです。</p>
<h3>Type</h3>
<p>こちらはあらゆるダミーテキストを一瞬で挿入できます。<br />
名前、見出し、文章、住所、日付、メールアドレス等など&#8230;</p>
<p>こちらも元のテキスト（なんでもOK）を用意し、それを選択しておきます。<br />
パネルを開き、変更したいものをクリックするだけで変更されます。</p>
<p><a href="/uploads-archive/2016/02/93JN3Zl7lD.gif" rel="attachment wp-att-9544"><img decoding="async" src="/uploads-archive/2016/02/93JN3Zl7lD.gif" alt="93JN3Zl7lD" width="640" class="alignnone size-large wp-image-9544" /></a></p>
<p>同じボタンを押してもランダムなので違う内容になります。</p>
<p>惜しいのは英語しかないという点ですね。日本語版があればすごくいいのに。。。</p>
<h3>Photos</h3>
<p>こちらは写真を挿入する機能になります。</p>
<p>ただ写真を貼り付けるだけなのかなと思っていましたが、作ったシェイプに合わせて写真を当て込んでくれるものでした。</p>
<p><a href="/uploads-archive/2016/02/sisGyFJoe1.gif" rel="attachment wp-att-9545"><img decoding="async" src="/uploads-archive/2016/02/sisGyFJoe1.gif" alt="sisGyFJoe1" width="640" class="alignnone size-large wp-image-9545" /></a></p>
<p><a href="https://unsplash.com/" target="_blank">Unsplash</a>というサイトから持ってこれますが、パソコンのフォルダやdropboxも指定できます。</p>
<p>どの場合も写真を選べるわけではなく、ランダムで入れてくれます。<br />
(自身のPCの場合、どこかのフォルダを選ぶと、そのフォルダ内にある写真をランダムで挿入します)</p>
<p>ですので、ダミー写真を用意するのに便利かと思います。</p>
<h2>終わりに</h2>
<p>管理画面、モックアップの作成にかなり使えるプラグインだと思いました。<br />
特に、SNS系、メディア系なんかのサイトに威力を発揮できるかもしれません。</p>
<p>僕は第一校のデザインは、全部同じ写真で出しちゃったりするので、ぜひ使用してみたいと思います。</p>
<p>おまけですが、こちら載せておきます。<br />
<a href="http://photoshopvip.net/ultimate-ps-tip" target="_blank">意外と知らない、Photoshop CCの隠し小技テクニック20個まとめました。 &#8211; PhotoshopVIP</a></p>


Photoshopが便利になるプラグイン「craft」

<p>いつでたのかは定かではありませんが、前々からgoogleフォームなるものの存在は知っていても利用することはありませんでした。</p>
<p>弊社で写真全員でブログを書いており、月毎で社員の投票により「<strong>ブログ賞</strong>」というものを決めています。</p>
<p>しかし、しばらくこの投票が行われない時期がありました。</p>
<p>それはなぜか考えた所、「投票が面倒くさい」からだろうと思い、なんかいいのないかなと思い利用したのが<strong>Googleフォーム</strong>でした。</p>
<p>実際に作成してみたところ簡単にできました。<br />
今月から使い初めたので集計がどうなるのかはわかりませんが、きっと便利そうな予感がします。（スプレッドシートに書き出されるのかな？？）</p>
<h2>Googleフォームの概要</h2>
<p>使い方は、まずはgoogleアカウントが必要ですね。<br />
そしてドライブから「<strong>新規</strong>」というボタンを押すと、「<strong>Googleフォーム</strong>」っていうのがあるのでそれをクリックです。</p>
<p>かなり雑な説明ですみません。この辺は大丈夫だと思うのだいぶ省略させていただきました。</p>
<p><a href="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png" rel="attachment wp-att-9439"><img decoding="async" loading="lazy" class="alignnone wp-image-9439" src="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png" alt="スクリーンショット 2016-02-02 17.55.10" width="640" height="351" srcset="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png 1024w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-300x164.png 300w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-768x421.png 768w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-228x125.png 228w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png 1104w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>そして、フォームのページに遷移後、<strong>右下の＋マーク</strong>を押すと新規で作成できます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9437" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949" width="640" height="395" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-300x185.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-768x474.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-228x141.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949.png 1155w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>色は好きな色が選べます。</p>
<p>&nbsp;</p>
<p>質問の項目としては、<br />
<strong>記述式、ラジオボタン、チェックボックス、プルダウン、均等目盛、選択式、日付、時刻</strong>といった要素があります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9443" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765" width="640" height="474" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-300x222.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-768x568.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-228x169.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765.png 1150w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>あとは、テキストはもちろん、<strong>画像</strong>や<strong>動画</strong>なんかも挿入できたりします！</p>
<p>回答できるユーザーも選択でき、<br />
全ユーザーであったり、googleアカウントを<strong>要ログイン</strong>であったり、<strong>一回のみ</strong>の回答という設定もできます！</p>
<p>共同で編集することもできます。</p>
<p>こんなに簡単に作れていろいろ設定も出来るとは思ってはいなかったでびっくりでした！！</p>
<p>社内向けアンケートであったり、イベントでのアンケートにぴったりですね！</p>


Googleフォームって実は簡単でとても便利だった！

<p>以前、記事でwebサイトのモックアップを作れるサービスを紹介しましたが、<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="_blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a></p>
<p>また新しいものを発見しました。<br />
その名も「Bootstrap Studio」です。<br />
<a class="link" href="https://bootstrapstudio.io/" target="_blank">Bootstrap Studio</a></p>
<p>こちらあの「Bootstrap」を元に作られており、bootstrapを使用したサイトのデザインが直感的にできます。</p>
<p>もはやphotoshopやsketchのようなデザインツールです。</p>
<p>有料のツールではありますが、手早くデザインを作れそうな感じがします。</p>
<p>こちらはアプリですが、Demoはブラウザ上で試すことが出来ます（google Chromeのみ）</p>
<h2>おまけ</h2>
<p>bootstrapではないCSSのフレームワークになります。<br />
<a href="http://foundation.zurb.com/sites.html">Foundation for Sites | Foundation for Sites</a></p>
<p>こちらのサイトではhtmlテンプレートが用意されており、<br />
自由にダウンロードできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9315" src="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg" alt="Foundation HTML Templates" width="640" height="414" srcset="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg 1024w, /uploads-archive/2016/01/Foundation-HTML-Templates-300x194.jpg 300w, /uploads-archive/2016/01/Foundation-HTML-Templates-768x497.jpg 768w, /uploads-archive/2016/01/Foundation-HTML-Templates-228x148.jpg 228w, /uploads-archive/2016/01/Foundation-HTML-Templates.jpg 1112w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://foundation.zurb.com/templates.html">Foundation | HTML Templates</a></p>


bootstrapのサイトのデザイン、モックアップが作れる「Bootstrap Studio」

<p>openexchangerates.orgとは、通貨変換のAPIを提供しているサービスで</p>
<p>対応通貨が多く、信頼性が高くて知られている。</p>
<p>&nbsp;</p>
<p>ドキュメントや紹介は英語で書かれており、デベロッパーが使う分には問題ないのだが、</p>
<p>日本のユーザー向けに見せるときは日本語表記にした方が親切だ。</p>
<p>そこで、1つずつググッてまとめてみた。</p>
<p>(ユーロを除く国が発行する通貨のみ記載)</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>ISO</th>
<th>英名</th>
<th>日本名</th>
<th>国名</th>
</tr>
<tr>
<td>AED</td>
<td>United Arab Emirates Dirham</td>
<td>UAE・ディルハム</td>
<td>アラブ首長国連邦</td>
</tr>
<tr>
<td>AFN</td>
<td>Afghan Afghani</td>
<td>アフガニ</td>
<td>アフガニスタン</td>
</tr>
<tr>
<td>ALL</td>
<td>Albanian Lek</td>
<td>レク</td>
<td>アルバニア</td>
</tr>
<tr>
<td>AMD</td>
<td>Armenian Dram</td>
<td>ドラム</td>
<td>アルメニア</td>
</tr>
<tr>
<td>ANG</td>
<td>Netherlands Antillean Guilder</td>
<td>ギルダー</td>
<td>アンティル</td>
</tr>
<tr>
<td>AOA</td>
<td>Angolan Kwanza</td>
<td>クワンザ</td>
<td>アンゴラ</td>
</tr>
<tr>
<td>ARS</td>
<td>Argentine Peso</td>
<td>ペソ</td>
<td>アルゼンチン</td>
</tr>
<tr>
<td>AUD</td>
<td>Australian Dollar</td>
<td>ドル</td>
<td>オーストラリア</td>
</tr>
<tr>
<td>AWG</td>
<td>Aruban Florin</td>
<td>フロリン</td>
<td>アルバ</td>
</tr>
<tr>
<td>AZN</td>
<td>Azerbaijani Manat</td>
<td>アゼルバイジャン・マナト</td>
<td>アゼルバイジャン</td>
</tr>
<tr>
<td>BAM</td>
<td>Bosnia-Herzegovina Convertible Mark</td>
<td>兌換マルク</td>
<td>ボスニア・ヘルツェゴビナ</td>
</tr>
<tr>
<td>BBD</td>
<td>Barbadian Dollar</td>
<td>バルバドス・ドル</td>
<td>バルバドス</td>
</tr>
<tr>
<td>BDT</td>
<td>Bangladeshi Taka</td>
<td>タカ</td>
<td>バングラデシュ</td>
</tr>
<tr>
<td>BGN</td>
<td>Bulgarian Lev</td>
<td>レフ</td>
<td>ブルガリア</td>
</tr>
<tr>
<td>BHD</td>
<td>Bahraini Dinar</td>
<td>バーレーン・ディナール</td>
<td>バーレーン</td>
</tr>
<tr>
<td>BIF</td>
<td>Burundian Franc</td>
<td>ブルンジ・フラン</td>
<td>ブルンジ</td>
</tr>
<tr>
<td>BMD</td>
<td>Bermudan Dollar</td>
<td>バミューダ・ドル</td>
<td>バミューダ</td>
</tr>
<tr>
<td>BND</td>
<td>Brunei Dollar</td>
<td>ブルネイ・ドル</td>
<td>ブルネイ</td>
</tr>
<tr>
<td>BOB</td>
<td>Bolivian Boliviano</td>
<td>ボリビアーノ</td>
<td>ボリビア</td>
</tr>
<tr>
<td>BRL</td>
<td>Brazilian Real</td>
<td>レアル</td>
<td>ブラジル</td>
</tr>
<tr>
<td>BSD</td>
<td>Bahamian Dollar</td>
<td>バハマ・ドル</td>
<td>バハマ</td>
</tr>
<tr>
<td>BTN</td>
<td>Bhutanese Ngultrum</td>
<td>ニュルタム</td>
<td>ブータン</td>
</tr>
<tr>
<td>BWP</td>
<td>Botswanan Pula</td>
<td>プラ</td>
<td>ボツワナ</td>
</tr>
<tr>
<td>BYR</td>
<td>Belarusian Ruble</td>
<td>ルーブル</td>
<td>ベラルーシ</td>
</tr>
<tr>
<td>BZD</td>
<td>Belize Dollar</td>
<td>ベリーズ・ドル</td>
<td>ベリーズ</td>
</tr>
<tr>
<td>CAD</td>
<td>Canadian Dollar</td>
<td>カナダ・ドル</td>
<td>カナダ</td>
</tr>
<tr>
<td>CDF</td>
<td>Congolese Franc</td>
<td>コンゴ・フラン</td>
<td>コンゴ</td>
</tr>
<tr>
<td>CHF</td>
<td>Swiss Franc</td>
<td>スイス・フラン</td>
<td>スイス</td>
</tr>
<tr>
<td>CLP</td>
<td>Chilean Peso</td>
<td>チリ・ペソ</td>
<td>チリ</td>
</tr>
<tr>
<td>CNY</td>
<td>Chinese Yuan</td>
<td>中人民元</td>
<td>中国</td>
</tr>
<tr>
<td>COP</td>
<td>Colombian Peso</td>
<td>コロンビア・ペソ</td>
<td>コロンビア</td>
</tr>
<tr>
<td>CRC</td>
<td>Costa Rican Colón</td>
<td>コロン</td>
<td>コスタリカ</td>
</tr>
<tr>
<td>CUP</td>
<td>Cuban Peso</td>
<td>キューバ・ペソ</td>
<td>キューバ</td>
</tr>
<tr>
<td>CVE</td>
<td>Cape Verdean Escudo</td>
<td>エスクード</td>
<td>カーボベルデ</td>
</tr>
<tr>
<td>CZK</td>
<td>Czech Republic Koruna</td>
<td>コルナ</td>
<td>チェコ</td>
</tr>
<tr>
<td>DJF</td>
<td>Djiboutian Franc</td>
<td>ジブチ・フラン</td>
<td>ジブチ</td>
</tr>
<tr>
<td>DKK</td>
<td>Danish Krone</td>
<td>クローネ</td>
<td>デンマーク</td>
</tr>
<tr>
<td>DOP</td>
<td>Dominican Peso</td>
<td>ドミニカ・ペソ</td>
<td>ドミニカ</td>
</tr>
<tr>
<td>DZD</td>
<td>Algerian Dinar</td>
<td>アルジェリア・ディナール</td>
<td>アルジェリア</td>
</tr>
<tr>
<td>EGP</td>
<td>Egyptian Pound</td>
<td>エジプト・ポンド</td>
<td>エジプト</td>
</tr>
<tr>
<td>ETB</td>
<td>Ethiopian Birr</td>
<td>ブル</td>
<td>エチオピア</td>
</tr>
<tr>
<td>EUR</td>
<td>Euro</td>
<td>ユーロ</td>
<td>ユーロ</td>
</tr>
<tr>
<td>FJD</td>
<td>Fijian Dollar</td>
<td colspan="2">フィジー・ドル</td>
</tr>
<tr>
<td>FKP</td>
<td>Falkland Islands Pound</td>
<td>フォークランド諸島・ポンド</td>
<td>フォークランド諸島ポンド</td>
</tr>
<tr>
<td>GBP</td>
<td>British Pound Sterling</td>
<td>ポンド</td>
<td>イギリス</td>
</tr>
<tr>
<td>GEL</td>
<td>Georgian Lari</td>
<td>ラリ</td>
<td>グルジア</td>
</tr>
<tr>
<td>GGP</td>
<td>Guernsey Pound</td>
<td>ガーンジー・ポンド</td>
<td>ガーンジー</td>
</tr>
<tr>
<td>GHS</td>
<td>Ghanaian Cedi</td>
<td>セディ</td>
<td>ガーナ</td>
</tr>
<tr>
<td>GIP</td>
<td>Gibraltar Pound</td>
<td>ジブラルタル・ポンド</td>
<td>ジブラルタル</td>
</tr>
<tr>
<td>GMD</td>
<td>Gambian Dalasi</td>
<td>ダラシ</td>
<td>ガンビア</td>
</tr>
<tr>
<td>GNF</td>
<td>Guinean Franc</td>
<td>ギニア・フラン</td>
<td>ギニア</td>
</tr>
<tr>
<td>GTQ</td>
<td>Guatemalan Quetzal</td>
<td>ケツァル</td>
<td>グアテマラ</td>
</tr>
<tr>
<td>GYD</td>
<td>Guyanaese Dollar</td>
<td>ガイアナ・ドル</td>
<td>ガイアナ</td>
</tr>
<tr>
<td>HKD</td>
<td>Hong Kong Dollar</td>
<td>香港・ドル</td>
<td>香港</td>
</tr>
<tr>
<td>HNL</td>
<td>Honduran Lempira</td>
<td>レンピラ</td>
<td>ホンジュラス</td>
</tr>
<tr>
<td>HRK</td>
<td>Croatian Kuna</td>
<td>クーナ</td>
<td>クロアチア</td>
</tr>
<tr>
<td>HTG</td>
<td>Haitian Gourde</td>
<td>グールド</td>
<td>ハイチ</td>
</tr>
<tr>
<td>HUF</td>
<td>Hungarian Forint</td>
<td>フォリント</td>
<td>ハンガリー</td>
</tr>
<tr>
<td>IDR</td>
<td>Indonesian Rupiah</td>
<td>ルピア</td>
<td>インドネシア</td>
</tr>
<tr>
<td>ILS</td>
<td>Israeli New Sheqel</td>
<td>新シェケル</td>
<td>イスラエル</td>
</tr>
<tr>
<td>IMP</td>
<td>Manx pound</td>
<td>マンクス・ポンド</td>
<td>マンクスポンド</td>
</tr>
<tr>
<td>INR</td>
<td>Indian Rupee</td>
<td>インド・ルピー</td>
<td>インド</td>
</tr>
<tr>
<td>IQD</td>
<td>Iraqi Dinar</td>
<td>イラク・ディナール</td>
<td>イラク</td>
</tr>
<tr>
<td>IRR</td>
<td>Iranian Rial</td>
<td>イラン・リアル</td>
<td>イラン</td>
</tr>
<tr>
<td>ISK</td>
<td>Icelandic Króna</td>
<td>アイスランド・クローナ</td>
<td>アイスランド</td>
</tr>
<tr>
<td>JEP</td>
<td>Jersey Pound</td>
<td>ジャージー・ポンド</td>
<td>ジャージー</td>
</tr>
<tr>
<td>JMD</td>
<td>Jamaican Dollar</td>
<td>ジャマイカ・ドル</td>
<td>ジャマイカ</td>
</tr>
<tr>
<td>JOD</td>
<td>Jordanian Dinar</td>
<td>ヨルダン・ディナール</td>
<td>ヨルダン</td>
</tr>
<tr>
<td>JPY</td>
<td>Japanese Yen</td>
<td>円</td>
<td>日本</td>
</tr>
<tr>
<td>KES</td>
<td>Kenyan Shilling</td>
<td>ケニア・シリング</td>
<td>ケニア</td>
</tr>
<tr>
<td>KGS</td>
<td>Kyrgystani Som</td>
<td>ソム</td>
<td>キルギス</td>
</tr>
<tr>
<td>KHR</td>
<td>Cambodian Riel</td>
<td>リエル</td>
<td>カンボジア</td>
</tr>
<tr>
<td>KMF</td>
<td>Comorian Franc</td>
<td>コモロ・フラン</td>
<td>コモロ</td>
</tr>
<tr>
<td>KPW</td>
<td>North Korean Won</td>
<td>北朝鮮・ウォン</td>
<td>北朝鮮</td>
</tr>
<tr>
<td>KRW</td>
<td>South Korean Won</td>
<td>韓国・ウォン</td>
<td>韓国</td>
</tr>
<tr>
<td>KWD</td>
<td>Kuwaiti Dinar</td>
<td>クウェート・ディナール</td>
<td>クウェート</td>
</tr>
<tr>
<td>KYD</td>
<td>Cayman Islands Dollar</td>
<td>ケイマン諸島・ドル</td>
<td>ケイマン諸島</td>
</tr>
<tr>
<td>KZT</td>
<td>Kazakhstani Tenge</td>
<td>テンゲ</td>
<td>カザフスタン</td>
</tr>
<tr>
<td>LAK</td>
<td>Laotian Kip</td>
<td>キープ</td>
<td>ラオス</td>
</tr>
<tr>
<td>LBP</td>
<td>Lebanese Pound</td>
<td>レバノン・ポンド</td>
<td>レバノン</td>
</tr>
<tr>
<td>LKR</td>
<td>Sri Lankan Rupee</td>
<td>スリランカ・ルピー</td>
<td>スリランカ</td>
</tr>
<tr>
<td>LRD</td>
<td>Liberian Dollar</td>
<td>リベリア・ドル</td>
<td>リベリア</td>
</tr>
<tr>
<td>LSL</td>
<td>Lesotho Loti</td>
<td>ロチ</td>
<td>レソト</td>
</tr>
<tr>
<td>LYD</td>
<td>Libyan Dinar</td>
<td>リビア・ディナール</td>
<td>リビア</td>
</tr>
<tr>
<td>MAD</td>
<td>Moroccan Dirham</td>
<td>モロッコ・ディルハム</td>
<td>モロッコ</td>
</tr>
<tr>
<td>MDL</td>
<td>Moldovan Leu</td>
<td>レウ</td>
<td>モルドバ</td>
</tr>
<tr>
<td>MGA</td>
<td>Malagasy Ariary</td>
<td>アリアリ</td>
<td>マダガスカル</td>
</tr>
<tr>
<td>MKD</td>
<td>Macedonian Denar</td>
<td>マケドニア・ディナール</td>
<td>マケドニア</td>
</tr>
<tr>
<td>MMK</td>
<td>Myanma Kyat</td>
<td>チャット</td>
<td>ミャンマー</td>
</tr>
<tr>
<td>MNT</td>
<td>Mongolian Tugrik</td>
<td>トゥグルグ</td>
<td>モンゴル</td>
</tr>
<tr>
<td>MOP</td>
<td>Macanese Pataca</td>
<td>パタカ</td>
<td>マカオ</td>
</tr>
<tr>
<td>MRO</td>
<td>Mauritanian Ouguiya</td>
<td>ウギア</td>
<td>モーリタニア</td>
</tr>
<tr>
<td>MUR</td>
<td>Mauritian Rupee</td>
<td>モーリシャス・ルピー</td>
<td>モーリシャス</td>
</tr>
<tr>
<td>MVR</td>
<td>Maldivian Rufiyaa</td>
<td>ルフィヤ</td>
<td>モルディブ</td>
</tr>
<tr>
<td>MWK</td>
<td>Malawian Kwacha</td>
<td>クワチャ</td>
<td>マラウイ</td>
</tr>
<tr>
<td>MXN</td>
<td>Mexican Peso</td>
<td>メキシコ・ペソ</td>
<td>メキシコ</td>
</tr>
<tr>
<td>MYR</td>
<td>Malaysian Ringgit</td>
<td>リンギット</td>
<td>マレーシア</td>
</tr>
<tr>
<td>MZN</td>
<td>Mozambican Metical</td>
<td>メティカル</td>
<td>モザンビーク</td>
</tr>
<tr>
<td>NAD</td>
<td>Namibian Dollar</td>
<td>ナミビア・ドル</td>
<td>ナミビア</td>
</tr>
<tr>
<td>NGN</td>
<td>Nigerian Naira</td>
<td>ナイラ</td>
<td>ナイジェリア</td>
</tr>
<tr>
<td>NIO</td>
<td>Nicaraguan Córdoba</td>
<td>コルドバ</td>
<td>ニカラグア</td>
</tr>
<tr>
<td>NOK</td>
<td>Norwegian Krone</td>
<td>ノルウェー・クローネ</td>
<td>ノルウェー</td>
</tr>
<tr>
<td>NPR</td>
<td>Nepalese Rupee</td>
<td>ネパール・ルピー</td>
<td>ネパール</td>
</tr>
<tr>
<td>NZD</td>
<td>New Zealand Dollar</td>
<td>ニュージーランド・ドル</td>
<td>ニュージーランド</td>
</tr>
<tr>
<td>OMR</td>
<td>Omani Rial</td>
<td>オマーン・リアル</td>
<td>オマーン</td>
</tr>
<tr>
<td>PAB</td>
<td>Panamanian Balboa</td>
<td>バルボア</td>
<td>パナマ</td>
</tr>
<tr>
<td>PEN</td>
<td>Peruvian Nuevo Sol</td>
<td>ヌエボ・ソル</td>
<td>ペルー</td>
</tr>
<tr>
<td>PGK</td>
<td>Papua New Guinean Kina</td>
<td>キナ</td>
<td>パプアニューギニア</td>
</tr>
<tr>
<td>PHP</td>
<td>Philippine Peso</td>
<td>フィリピン・ペソ</td>
<td>フィリピン</td>
</tr>
<tr>
<td>PKR</td>
<td>Pakistani Rupee</td>
<td>パキスタン・ルピー</td>
<td>パキスタン</td>
</tr>
<tr>
<td>PLN</td>
<td>Polish Zloty</td>
<td>ズウォティ</td>
<td>ポーランド</td>
</tr>
<tr>
<td>PYG</td>
<td>Paraguayan Guarani</td>
<td>グアラニー</td>
<td>パラグアイ</td>
</tr>
<tr>
<td>QAR</td>
<td>Qatari Rial</td>
<td>カタール・リアル</td>
<td>カタール</td>
</tr>
<tr>
<td>RON</td>
<td>Romanian Leu</td>
<td>レウ</td>
<td>ルーマニア</td>
</tr>
<tr>
<td>RSD</td>
<td>Serbian Dinar</td>
<td>セルビア・ディナール</td>
<td>セルビア</td>
</tr>
<tr>
<td>RUB</td>
<td>Russian Ruble</td>
<td>ルーブル</td>
<td>ロシア</td>
</tr>
<tr>
<td>RWF</td>
<td>Rwandan Franc</td>
<td>ルワンダ・フラン</td>
<td>ルワンダ</td>
</tr>
<tr>
<td>SAR</td>
<td>Saudi Riyal</td>
<td>サウジ・リアル</td>
<td>サウジ</td>
</tr>
<tr>
<td>SBD</td>
<td>Solomon Islands Dollar</td>
<td>ソロモン諸島・ドル</td>
<td>ソロモン諸島</td>
</tr>
<tr>
<td>SCR</td>
<td>Seychellois Rupee</td>
<td>セーシェル・ルピー</td>
<td>セーシェル</td>
</tr>
<tr>
<td>SDG</td>
<td>Sudanese Pound</td>
<td>スーダン・ポンド</td>
<td>スーダン</td>
</tr>
<tr>
<td>SEK</td>
<td>Swedish Krona</td>
<td>スウェーデン・クローナ</td>
<td>スウェーデン</td>
</tr>
<tr>
<td>SGD</td>
<td>Singapore Dollar</td>
<td>シンガポール・ドル</td>
<td>シンガポール</td>
</tr>
<tr>
<td>SHP</td>
<td>Saint Helena Pound</td>
<td>セントヘレナ・ポンド</td>
<td>セントヘレナ</td>
</tr>
<tr>
<td>SLL</td>
<td>Sierra Leonean Leone</td>
<td>レオン</td>
<td>シエラレオネ</td>
</tr>
<tr>
<td>SOS</td>
<td>Somali Shilling</td>
<td>ソマリア・シリング</td>
<td>ソマリア</td>
</tr>
<tr>
<td>SRD</td>
<td>Surinamese Dollar</td>
<td>スリナム・ドル</td>
<td>スリナム</td>
</tr>
<tr>
<td>STD</td>
<td>São Tomé and Príncipe Dobra</td>
<td>ドブラ</td>
<td>サントメ・プリンシペ</td>
</tr>
<tr>
<td>SVC</td>
<td>Salvadoran Colón</td>
<td>コロン</td>
<td>エルサルバドル</td>
</tr>
<tr>
<td>SYP</td>
<td>Syrian Pound</td>
<td>シリア・ポンド</td>
<td>シリア</td>
</tr>
<tr>
<td>SZL</td>
<td>Swazi Lilangeni</td>
<td>リランゲニ</td>
<td>スワジランド</td>
</tr>
<tr>
<td>THB</td>
<td>Thai Baht</td>
<td>バーツ</td>
<td>タイ</td>
</tr>
<tr>
<td>TJS</td>
<td>Tajikistani Somoni</td>
<td>ソモニ</td>
<td>タジキスタン</td>
</tr>
<tr>
<td>TMT</td>
<td>Turkmenistani Manat</td>
<td>トルクメニスタン・マナト</td>
<td>トルクメニスタン</td>
</tr>
<tr>
<td>TND</td>
<td>Tunisian Dinar</td>
<td>チュニジア・ディナール</td>
<td>チュニジア</td>
</tr>
<tr>
<td>TOP</td>
<td>Tongan Paʻanga</td>
<td>パアンガ</td>
<td>トンガ</td>
</tr>
<tr>
<td>TRY</td>
<td>Turkish Lira</td>
<td>トルコ・リラ</td>
<td>トルコ</td>
</tr>
<tr>
<td>TTD</td>
<td>Trinidad and Tobago Dollar</td>
<td>トリニダードトバゴ・ドル</td>
<td>トリニダードトバゴ</td>
</tr>
<tr>
<td>TWD</td>
<td>New Taiwan Dollar</td>
<td>ニュー台湾・ドル</td>
<td>台湾</td>
</tr>
<tr>
<td>TZS</td>
<td>Tanzanian Shilling</td>
<td>タンザニア・シリング</td>
<td>タンザニアシリング</td>
</tr>
<tr>
<td>UAH</td>
<td>Ukrainian Hryvnia</td>
<td>フリヴニャ</td>
<td>ウクライナ</td>
</tr>
<tr>
<td>UGX</td>
<td>Ugandan Shilling</td>
<td>ウガンダ・シリング</td>
<td>ウガンダ</td>
</tr>
<tr>
<td>USD</td>
<td>United States Dollar</td>
<td>米ドル</td>
<td>アメリカ</td>
</tr>
<tr>
<td>UYU</td>
<td>Uruguayan Peso</td>
<td>ウルグアイ・ペソ</td>
<td>ウルグアイ</td>
</tr>
<tr>
<td>UZS</td>
<td>Uzbekistan Som</td>
<td>スム</td>
<td>ウズベキスタン</td>
</tr>
<tr>
<td>VEF</td>
<td>Venezuelan Bolívar Fuerte</td>
<td>ボリバル・フエルテ</td>
<td>ベネズエラ</td>
</tr>
<tr>
<td>VND</td>
<td>Vietnamese Dong</td>
<td>ドン</td>
<td>ベトナム</td>
</tr>
<tr>
<td>VUV</td>
<td>Vanuatu Vatu</td>
<td>バツ</td>
<td>バヌアツ</td>
</tr>
<tr>
<td>WST</td>
<td>Samoan Tala</td>
<td>タラ</td>
<td>サモア</td>
</tr>
<tr>
<td>YER</td>
<td>Yemeni Rial</td>
<td>イエメン・リアル</td>
<td>イエメン</td>
</tr>
<tr>
<td>ZAR</td>
<td>South African Rand</td>
<td>ランド</td>
<td>南アフリカ</td>
</tr>
<tr>
<td>ZMW</td>
<td>Zambian Kwacha</td>
<td>クワチャ</td>
<td>ザンビア</td>
</tr>
</tbody>
</table>


openexchangerates.orgで使える通貨と国名を日本語にしてみた

<p>フォームのパーツで、selectやcheckboxやradioはinputのtextのようにcssで装飾出来ず、オリジナルのデザインにするためにはひと手間必要になります。</p>
<p>ただ、selectは見た目を変えてもクリックした後に出てくるoptionはなかなか変えられないため、<br />
いっその事、selectとcheckboxの要素を合わせたようなものを作成してみました。</p>
<p>&nbsp;</p>
<p>実際、selectは使わずに、<br />
inputのtextと、checkboxを使用して作成しました。</p>
<p>codepenを以前から登録していたのですが、使うことがなかったので試しに使ってみました。</p>
<p class="codepen" data-height="268" data-theme-id="0" data-slug-hash="GoOvLx" data-default-tab="result" data-user="alan0131">See the Pen <a href="http://codepen.io/alan0131/pen/GoOvLx/">selectとcheckboxを掛けあわせたものをオリジナルデザインで</a> on <a href="http://codepen.io">CodePen</a>.</p>
<p><script src="//assets.codepen.io/assets/embed/ei.js" async=""></script></p>
<p>これは、inputのtextの箇所をクリックすると、リストが表示されます。(そのリスト一つ一つがcheckboxです)<br />
そして、チェックをすると、チェックした要素のvalueがinputのtextの値に入ります。</p>
<p>「.atCheckbox」の中にワンセットという感じで、「.atCheckbox」ごと追加すれば増やしても、jqueryの方は変更する必要はないです。</p>
<h2>codepen</h2>
<p>codepenを実際に使ってみましたが、コードも入れやすいですし、直ぐに結果が表示されるのでいいですね！<br />
使い回せそうなコードを登録するのはもちろん、ちょっと試しにjavascriptを試してみたいといった時なんかもいいかもしれません。</p>
<p>そんなcodepenで2015年に最もお気に入りされたコードのランキングが公開されていました。</p>
<p><a href="http://codepen.io/2015/popular/pens/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-9243" src="/uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen-1024x554.jpg" alt="Top Pens of 2015 on CodePen" width="640" height="346" srcset="/uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen-1024x554.jpg 1024w, /uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen-300x162.jpg 300w, /uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen-768x416.jpg 768w, /uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen-228x123.jpg 228w, /uploads-archive/2016/01/Top-Pens-of-2015-on-CodePen.jpg 1231w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
<a href="http://codepen.io/2015/popular/pens/" class="link" target="_blank">Top Pens of 2015 on CodePen</a></p>
<p>参考になるコードばかりで、見ているだけでも楽しいですね！</p>


selectとcheckboxを合わせたようなフォームのオリジナルパーツ

<h2>IE10以前はもう古い！？</h2>
<div style="padding-left: 15px;">
  Web屋の鬼門(？)のIEのサポート状況が大きく変わりました。</p>
<p>  サポートが終了すると何が変わるのか？<br />
  、、、と言いますと、公式から配布されていた<br />
  セキュリティ脆弱性対策バッチが今後なくなる。</p>
<p>  つまり脆弱性をついたスクリプトに対して無防備となってしまうと言う事です。
</p></div>
<h2>各OS別 サポート状況まとめ</h2>
<div style="padding-left: 15px;">
  Windows Vista : IE7, IE8 ともに2016年1月13日で終了。IE9は2017年4月12日に終了。<br />
  Windows 7 : IE8, IE9, IE10 ともに2016年1月13日で終了。IE11は2020年1月15日に終了。<br />
  Windows 8 : OSそのものが2016年1月13日にてサポート終了。<br />
  Windows 8.1 : IE11 のみ。2023年1月11日に終了。<br />
  Windwos 10 : IE11 2025年10月15日に終了。(MS Edgeと同じ)</p>
<p>  ※ その他Windows Serverなどについては<a href="http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html">こちら</a>参照のこと
</div>
<h2>総評</h2>
<div style="padding-left: 15px;">
  未だにシステム移管などのコスト節減のために旧システムを<br />
  使用したままの企業やコンシューマーが多いのが現状。</p>
<p>  しかしセキュリティ面やブラウザでの新機能／汎用性の高いサービス向上のため<br />
  適度なシステム移行が好ましいと感じられた。</p>
<p>  ※ ただし新システム移行を無理強いするのはその限りではない。
</p></div>


ブラウザ事情の変化

animationなグラフが描けるChartist.js使ってみました

<p>webデザインをする時はPhotoshop(CC)を使っており、ワイヤーフレームを自分で書くときもPhotoshopを使用しています。</p>
<p>最近、webデザインやアプリデザインをする場合は<a href="https://www.sketchapp.com/" target="_blank">Sketch</a>が着々と人気になっており、</p>
<p>ワイヤーフレームやモックアップを作る時は、</p>
<ul>
<li><a href="https://www.flinto.com/" target="_blank">Flinto</a></li>
<li><a href="http://www.pixate.com/" target="_blank">Pixate</a></li>
<li><a href="https://prottapp.com/ja/" target="_blank">Prott &#8211; Prototyping tool for Web iOS Android apps</a></li>
<li><a href="http://www.invisionapp.com/" target="_blank">InVision</a></li>
<li><a href="https://popapp.in/" target="_blank">POP</a></li>
<li><a href="https://moqups.com/" target="_blank">Moqups</a></li>
<li><a href="http://www.justinmind.com/" target="_blank">Justinmind</a></li>
<li><a href="http://frame.lab25.co.uk/" target="_blank">Frame</a></li>
</ul>
<p>といったいろいろなサービスが使われているようです。</p>
<p>非常に便利そうで使ってみたいのですが、有料のものが多く、なかなか使用することに踏みきれません。(どのサービスもトライアル期間がありますので試す事が可能です)</p>
<p>なので、photoshopでワイヤーフレームを作ってしまうという状況にあります。</p>
<p>上記に紹介しているようなサービスのように簡単にモックアップやワイヤーフレームを作りたいなぁと思っていた所、<br />
adobeであるモノを発見しました。</p>
<h2>Project Comet</h2>
<p>それがAdobeの「Project Comet」です。</p>
<p><a href="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" rel="attachment wp-att-9119"><img decoding="async" loading="lazy" class="alignnone wp-image-9119" src="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" alt="スクリーンショット 2016-01-12 14.28.24" width="640" height="449" srcset="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png 962w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-300x210.png 300w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-768x539.png 768w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-228x160.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html" target="_blank">User experience, prototyping and design app | Adobe Project Comet</a></p>
<p>ワイヤーフレームやモックアップが簡単に作れちゃいそうな雰囲気がしますね！</p>
<p>これが今年の早い段階で公開されるとのことでいつになるのかワクワクしております。<br />
そしてphotoshopCC利用者であれば無料になってくれないかなと淡い期待をしております笑</p>
<h2>Adode Comp</h2>
<p>スマホやタブレット限定になりますが、ワイヤーフレームやカンプを作るためのアプリ(iPhone)は既にあります。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9118" src="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png" alt="スクリーンショット 2016-01-12 14.27.49" width="640" height="420" srcset="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png 1016w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-300x197.png 300w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-768x504.png 768w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-228x150.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2015/images/comp-marquee.jpg" target="_blank">Adobe Comp CC</a></p>
<p>こちらは無料のアプリで、直感的に作成出来るので慣れたら楽にどこにいても作成することができるかと思います。</p>
<p>これのPC版がProject Cometなのでしょうか？？</p>
<h2>Photoshop CCも進化している！</h2>
<p>photoshopも負けておりません。<br />
当初は写真加工のツールだったにもかかわらず、どんどんwebデザインするのに適した機能が追加されています。<br />
CCになることによって短いスパンで機能が追加されていくのが日に日に便利になっているような気がします。</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/tutorials.html" target="_blank">Photoshop CCチュートリアル | Photoshop CCの使い方</a></p>
<p>なかでも2015年11月に追加された「デザインスペース」というものが良く、「UXやモバイルアプリのデザイン作業に適している」とのことで、ちょっとsketchとかに寄せているんじゃないかと思わせるようなものになっています。</p>
<p>ccをご使用している方ならこれは必見です！！</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/how-to/design-space.html?set=photoshop--whats-new--2015-11" target="_blank">デザインスペース（プレビュー）の概要 | Adobe Photoshop CC tutorials</a></p>
<p>こちらのデザインスペースに関してはまだ別に取り上げて見たいと思います。</p>
<p>昔はAdobe一択で、最近他のツールが出て来て盛りあがってますが、まだまだAdobeもいいですね！<br />
僕は期待してます！</p>


webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！

<p>今年もこの季節がやってまいりました</p>
<p><a href="http://designmodo.com/web-design-trends-2016/" target="_blank">http://designmodo.com/web-design-trends-2016/</a></p>
<p>&nbsp;</p>
<p>自分の英語の勉強も兼ねて翻訳・要約してみた</p>
<p>&nbsp;</p>
<h2>縦スクロールとそのパターン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9069" src="/uploads-archive/2016/01/2016webtrend_1.jpg" alt="2016webtrend_1" width="900" height="496" srcset="/uploads-archive/2016/01/2016webtrend_1.jpg 900w, /uploads-archive/2016/01/2016webtrend_1-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_1-768x423.jpg 768w, /uploads-archive/2016/01/2016webtrend_1-228x126.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.beoplay.com/products/beoplayh7" target="_blank">http://www.beoplay.com/products/beoplayh7</a></p>
<p>モバイル端末からのアクセスが増えているので、今後ユーザーは縦スクロールの頻度が増え、 デザイナーは縦スクロールのユーザーインターフェイスをデザインすることの重要度が高まる</p>
<p>&nbsp;</p>
<h2>もっと、カード型デザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9065" src="/uploads-archive/2016/01/2016webtrend_2.jpg" alt="2016webtrend_2" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_2.jpg 900w, /uploads-archive/2016/01/2016webtrend_2-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_2-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_2-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://block16omaha.com/" target="_blank">http://block16omaha.com/</a></p>
<p>マテリアルデザインから生まれたカード型デザインはアプリ、ウェブサイト、紙媒体などあらゆる場所で使われている。</p>
<p>カード型デザインはユーザーフレンドリーに情報整理ができ、作るのも楽しい。</p>
<p>更に、カード型デザインはデバイスを問わず動作するというメリットがある</p>
<p>&nbsp;</p>
<h2>ヒーロービデオヘッダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9066" src="/uploads-archive/2016/01/2016webtrend_3.jpg" alt="2016webtrend_3" width="900" height="490" srcset="/uploads-archive/2016/01/2016webtrend_3.jpg 900w, /uploads-archive/2016/01/2016webtrend_3-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_3-768x418.jpg 768w, /uploads-archive/2016/01/2016webtrend_3-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://follow-your-intuition.com/" target="_blank">http://follow-your-intuition.com/</a></p>
<p>ウェブデザインは映画制作のようになるだろう。</p>
<p>回線速度やモジュールの発展により映画のような体験をサイトに盛り込むことができるようになってきている。</p>
<p>ウェブ上の動画は、小さなものからフルカットへと進化し、高解像度で、くっきりとさくさく動作する。</p>
<p>これはユーザーに新しい体験だが、テレビでお馴染みの体験といえる</p>
<p>&nbsp;</p>
<h2>微細なアニメーション</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9067" src="/uploads-archive/2016/01/2016webtrend_4.jpg" alt="2016webtrend_4" width="900" height="487" srcset="/uploads-archive/2016/01/2016webtrend_4.jpg 900w, /uploads-archive/2016/01/2016webtrend_4-300x162.jpg 300w, /uploads-archive/2016/01/2016webtrend_4-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_4-228x123.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://labs.convoy.me/camper/#!/landing" target="_blank">http://labs.convoy.me/camper/#!/landing</a></p>
<p>アニメーションは2015年からの最も大きなトレンドの1つだ。</p>
<p>ヒーローヘッダのようなサイトの顔から、見逃してしまうほど小さいものまで、<br />
アニメーションは至る所に存在している。</p>
<p>アニメーションを使う上で最も重要なことは、なぜこのアニメーションを作り、何を想定しているかといった<br />
目的を明らかにすることだ。</p>
<p>&nbsp;</p>
<h2>インタラクションデザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9068" src="/uploads-archive/2016/01/2016webtrend_5.jpg" alt="2016webtrend_5" width="900" height="473" srcset="/uploads-archive/2016/01/2016webtrend_5.jpg 900w, /uploads-archive/2016/01/2016webtrend_5-300x158.jpg 300w, /uploads-archive/2016/01/2016webtrend_5-768x404.jpg 768w, /uploads-archive/2016/01/2016webtrend_5-228x120.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.wove.com/" target="_blank">http://www.wove.com/</a></p>
<p>アニメーションと同時に活用されているのがインタラクションデザインだ。</p>
<p>インタラクションデザインはアプリやモバイルサイトにおいて、ユーザーとデバイスをつなぐ軸である。</p>
<p>良いインタラクションデザインはごくわずかな場合もあるが、ユーザーに価値を与えている。</p>
<p>メッセージ受信時のアラームから、ゲーム中にあなたの番が来た時の短い音など、<br />
ほんの小さなインタラクションデザインが人々とデバイスのやりとりを形作っている</p>
<p>&nbsp;</p>
<h2>更に美しいタイポグラフィ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9059" src="/uploads-archive/2016/01/2016webtrend_6.jpg" alt="2016webtrend_6" width="900" height="488" srcset="/uploads-archive/2016/01/2016webtrend_6.jpg 900w, /uploads-archive/2016/01/2016webtrend_6-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_6-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_6-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.viens-la.com/" target="_blank">http://www.viens-la.com/</a></p>
<p>合理化されたインターフェイスは美しいタイポグラフィへと導く。</p>
<p>大きくて太いタイポグラフィは他のトレンドとマッチすることから、今後も継続するだろう。</p>
<p>このシンプルな字体は他の要素との空間を広げ、高い可読性によりメッセージを伝えることができる。</p>
<p>単に読み易い書体のペアや、楽しくて珍しいものはぜひ挑戦したい小技だ</p>
<p>&nbsp;</p>
<h2>イラストとスケッチ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9060" src="/uploads-archive/2016/01/2016webtrend_7.jpg" alt="2016webtrend_7" width="900" height="489" srcset="/uploads-archive/2016/01/2016webtrend_7.jpg 900w, /uploads-archive/2016/01/2016webtrend_7-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_7-768x417.jpg 768w, /uploads-archive/2016/01/2016webtrend_7-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://orangeyouglad.com/" target="_blank">http://orangeyouglad.com/</a></p>
<p>イラストやスケッチはサイトに気まぐれで楽しい要素を与える。</p>
<p>これらは全てのサイトに当てはまり、決して子供向けのサイトだけのものではない。</p>
<p>イラストは、アイコンやその他の要素などサイトの細かな部分から人気が高まってきている<br />
イラストはサイトにパーソナルな印象を持たせるという点が良い。</p>
<p>手書きのイラストやスケッチアイコンはユーザーに個性を感じさせ、ユーザーとの長いつながりに貢献するだろう</p>
<p>&nbsp;</p>
<h2>大胆で明るい色調 (80&#8217;sな雰囲気)</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9061" src="/uploads-archive/2016/01/2016webtrend_8.jpg" alt="2016webtrend_8" width="900" height="477" srcset="/uploads-archive/2016/01/2016webtrend_8.jpg 900w, /uploads-archive/2016/01/2016webtrend_8-300x159.jpg 300w, /uploads-archive/2016/01/2016webtrend_8-768x407.jpg 768w, /uploads-archive/2016/01/2016webtrend_8-228x121.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://circlesconference.com/" target="_blank">http://circlesconference.com/</a></p>
<p>大胆で明るい色調はフラットデザインとともに増加してきている。</p>
<p>Googleの&#8221;Material Design documentation&#8221;も協議が進んでおり、&#8221;Dribbble&#8221;を見ると色が散々としている。</p>
<p>これらはキーとなる指標であり、この色は年内にされに大きくなるだろう。</p>
<p>大胆な色使いにおいての幾つかの変化として、これらの色を使った文字がトレンドとなるだろう。</p>
<p>2015年はモノトーンが主流でしたが、80年代な大胆で明るい色使いが増えてくるだろう</p>
<p>&nbsp;</p>
<h2>ハンバーガーメニューと図解</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.primeit.pt/en/" target="_blank">http://www.primeit.pt/en/</a></p>
<p>多くのデザイナーが楽しいアイコンや、簡単にアイコンを作れるキットをリリースしている。</p>
<p>その他に重要な点として、SVGの普及により巨大なアイコンを実験的に使用するデザイナーが出現していることだ</p>
<p>&nbsp;</p>
<h2>リアルと空想の融合</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://bluestag.co.uk/" target="_blank">http://bluestag.co.uk/</a></p>
<p>次のゲーミフィケーションとデザインのステップは、リアルと空想(ウェブデザインにより作られたもの)の境界をぼかすことだ。</p>
<p>バーチャルリアリティからウェブサイトまで、これらはあなたに新しい要素を見つける選択肢を与え、ユーザーはこのタイプのカスタマイズを好む傾向にある</p>
<p>&nbsp;</p>
<h2>スライダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9064" src="/uploads-archive/2016/01/2016webtrend_11.jpg" alt="2016webtrend_11" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_11.jpg 900w, /uploads-archive/2016/01/2016webtrend_11-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_11-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_11-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://yearinreview.fb.com/2015/us-presidential-election/" target="_blank">http://yearinreview.fb.com/2015/us-presidential-election/</a></p>
<p>まずはじめに、スライダーはウェブサイトの枠の中で画像を動かし複数見せることができた。</p>
<p>次の変化はフルスクリーンスライドだ。</p>
<p>それぞれのスライドは切替によって新たな内容を表示できる。クリック、スクロールや時間による処理もできる。<br />
ユーザーは前後のコンテンツに直感的に移動することができる。</p>
<p>このようなコンセプトは、数ヶ月のうちにさらに多く見かけることになるだろう</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ちなみに、以下は自分が昨年6月に2015年上半期のトレンドをまとめた記事</p>
<blockquote data-secret="znXQr4BvIU" class="wp-embedded-content"><p><a href="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html">【Webデザイン】2015年 上半期のトレンド</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html/embed#?secret=znXQr4BvIU" data-secret="znXQr4BvIU" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p>そんなに変わってない気がするのは自分だけだろうか。</p>
<p>モバイルファーストや動画は当たり前、あとはマテリアルデザインとSVGが着々と広まってきているといった印象だ</p>


【Webデザイント】2016年に流行しそうなレンド11選

Sphinxで充実ドキュメントライフを！

<p>今回はwebサービスのご紹介になります。</p>
<p>この「booky.io」単純なブックマーク管理なサービスなのですが、オシャレで簡単に扱うことができます。</p>
<p>PCのブラウザだけでなく、タブレット・スマホでも使用可能なので、<br />
どんなデバイスでも同じようにブックマークを管理できます。<br />
今まで僕は、メールでリンクでPCへ送ったり、Pocketを使っていたりしてました。<br />
しかし、Pocketはあとで読むみたいな感じなので、<br />
ブックマークとはちょっと違う感じでなるべく使いたくありませんでした。<br />
あと、タグはありますが、カテゴリーがないので整理が難しいです。</p>
<p>その点、booky.ioはカテゴリーを自由に増やすこともでき、デザインもすっきりしていて見やすいです。<br />
登録する際もブックマークレットが用意されているので簡単です。</p>
<p><a href="http://booky.io/" class="link"  target="_blank">booky.io | Online bookmark manager. Your bookmarks available on all devices.</a></p>


オシャレなブックマーク管理サービス「booky.io」

<p>フォントがわからない時、例えば似てるフォント使っといてと言われたときや自分で作ったのに何のフォントを使ったか思い出せないという時があると思う。</p>
<p>そんな時の対処法を2点</p>
<h2>WhatTheFont</h2>
<p><a href="http://www.myfonts.com/WhatTheFont/" target="_blank">http://www.myfonts.com/WhatTheFont/</a></p>
<p><a href="/uploads-archive/2015/10/launchcart.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8317" src="/uploads-archive/2015/10/launchcart.jpg" alt="launchcart" width="500" height="100" srcset="/uploads-archive/2015/10/launchcart.jpg 500w, /uploads-archive/2015/10/launchcart-300x60.jpg 300w, /uploads-archive/2015/10/launchcart-228x46.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
まずはフォントを調べたい画像を用意する</p>
<p><a href="/uploads-archive/2015/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8318" src="/uploads-archive/2015/10/2.png" alt="2" width="656" height="374" srcset="/uploads-archive/2015/10/2.png 656w, /uploads-archive/2015/10/2-300x171.png 300w, /uploads-archive/2015/10/2-228x130.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
それを選択してアップロード<br />
Continueをクリック</p>
<p><a href="/uploads-archive/2015/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8319" src="/uploads-archive/2015/10/3.png" alt="3" width="656" height="575" srcset="/uploads-archive/2015/10/3.png 656w, /uploads-archive/2015/10/3-300x263.png 300w, /uploads-archive/2015/10/3-228x200.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
するとシステムで解析、判断したそれぞれの文字が出てくる。<br />
空欄であれば何の文字かを、間違っていれば修正してContinueをクリック</p>
<p><a href="/uploads-archive/2015/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8320" src="/uploads-archive/2015/10/4.png" alt="4" width="656" height="558" srcset="/uploads-archive/2015/10/4.png 656w, /uploads-archive/2015/10/4-300x255.png 300w, /uploads-archive/2015/10/4-228x194.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
15件も近しいフォントがマッチした<br />
実際にはSteinerというフォントだったのだが、この中に正解は無かった<br />
ただ、似ているフォントを探すという意味ではすごく有用だと思われる</p>
<p>ただ、難点としては日本語フォントに対応していないということ</p>
<p>残念ながら日本語フォントに対応している類似のサイトは見つからず<br />
identifontというサービスを使うのが良さそう</p>
<h2>Identifont</h2>
<p><a href="http://www.identifont.jp/" target="_blank">http://www.identifont.jp/</a></p>
<p>形状別、名称別、スタイル別などでフォントを手動で検索できる</p>
<p>冒頭のようなケースでは形状別が良さそうだ</p>
<p><a href="/uploads-archive/2015/10/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8321" src="/uploads-archive/2015/10/51.jpg" alt="5" width="300" height="300" srcset="/uploads-archive/2015/10/51.jpg 300w, /uploads-archive/2015/10/51-150x150.jpg 150w, /uploads-archive/2015/10/51-228x228.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
小塚ゴシック で試してみた</p>
<p><a href="/uploads-archive/2015/10/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8322" src="/uploads-archive/2015/10/6.jpg" alt="6" width="656" height="2172" srcset="/uploads-archive/2015/10/6.jpg 656w, /uploads-archive/2015/10/6-91x300.jpg 91w, /uploads-archive/2015/10/6-309x1024.jpg 309w, /uploads-archive/2015/10/6-228x755.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>正解！</p>
<p>ただ、あまりメジャーではないフォントは対応していないようだ</p>


画像のフォントが何かを調べる方法

<p>twitterやfacebookはいろんなタイプのウィジェットを生成することが出来ますが、<br />
instagramでは投稿を埋め込むことくらいしか出来ません。</p>
<p>自分のアカウントの写真を表示して埋め込みたい、みたいな時があると思います。<br />
そんな時に、この「SnapWidget」を使うと、便利なウィジェットを生成してくれます！</p>
<p><a class="link" href="http://snapwidget.com/#getstarted" target="_blank">SnapWidget</a></p>
<h2>使い方</h2>
<p>使い方といっても、下記の画面にて、必要項目を記入し、「Get Widget」を押すと、<br />
iframeのソースが生成されますので、それをサイトに貼り付ければOKです！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8263" src="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg" alt="SnapWidgetInstagramWidget2" width="630" height="361" srcset="/uploads-archive/2015/10/SnapWidgetInstagramWidget2-1024x587.jpg 1024w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-300x172.jpg 300w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2-228x131.jpg 228w, /uploads-archive/2015/10/SnapWidgetInstagramWidget2.jpg 1126w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>ただ、もっと自由に扱いたいという場合は、<br />
APIを利用する必要がありそうですね。</p>
<p>下記のブログがすごい良くまとめられているので、自分も必要になったら参考にしたいと思います。</p>
<p><a href="https://syncer.jp/instagram-api-matome">Instagram APIでwebサービスを作りたい全ての人に向けて書きました</a></p>


instagramのウィジェットを生成してくれるサービス「SnapWidget」

<p>すべてというのは僕が勝手に思ってる内容です・・・</p>
<p>僕がよく使用しているアイコン、「fontawesome」「Glyphicons」「Entypo」が含まれています。</p>
<p>他にも、今後も利用できそうな「Material」「Flat Color」があります。</p>
<p>使い方は非常に簡単です。</p>
<p>DEMOはこちらです。<br />
<a href="/demo/abe/60/" target="_blank" class="demo">DEMO</a></p>
<h2>We Love SVGの使い方</h2>
<p>まずはこちらからzipをダウンロードします。<br />
<a href="https://icons8.github.io/webicon/" target="_blank">Webicon by Icons8</a></p>
<p>head内に下記コードを設置します。 </p>
<p></p>

		<div id="crayon-649540158bc95781787149" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-webicon.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158bc95781787149-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc95781787149-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158bc95781787149-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc95781787149-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-webicon.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、htmlで、</p>
<p></p>

		<div id="crayon-649540158bc9a270899462" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;webicon icon="search"&gt;&lt;/webicon&gt;
&lt;span webicon="news"&gt;&lt;/span&gt;
&lt;div data-webicon="print"&gt;&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158bc9a270899462-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158bc9a270899462-2">2</div><div class="crayon-num" data-line="crayon-649540158bc9a270899462-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158bc9a270899462-1"><span class="crayon-r ">&lt;webicon </span><span class="crayon-e ">icon</span>=<span class="crayon-s ">"search"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/webicon&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158bc9a270899462-2"><span class="crayon-r ">&lt;span </span><span class="crayon-e ">webicon</span>=<span class="crayon-s ">"news"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-649540158bc9a270899462-3"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">data-webicon</span>=<span class="crayon-s ">"print"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と書くだけです！</p>
<p>サイズを変えたい場合は、cssでwidthを指定すれば変更できます。</p>
<p>簡単！といいたいところですが、<br />
flat-colorのものしか使えず。。。<br />
勉強不足ですね。。。</p>
<p>また出直します。</p>
<p><a href="https://icons8.com/welovesvg" class="link" target="_blank">We Love SVG &#8211; Google Fonts for icons | Icons8</a></p>

すべて(※)のアイコンが集約された「We Love SVG」

<p>WEBデザインとして定番として使われているものの中には、</p>
<p>実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、</p>
<p>そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。</p>
<p><span style="display:block;margin-bottom:-15px">&nbsp;</span></p>
<p>今回紹介するものはスマホの時に特に問題となるものが多いです。</p>
<p>PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。</p>
<p>↓このページのQRコード<br />
<img decoding="async" class="alignnone wp-image-8006 size-full" src="/uploads-archive/2015/08/qr1.png" alt="" width="120" srcset="/uploads-archive/2015/08/qr1.png 175w, /uploads-archive/2015/08/qr1-150x150.png 150w" sizes="(max-width: 175px) 100vw, 175px" /></p>
<p>&nbsp;</p>
<h2>予告のないポップアップ・別タブ表示(特にスマホ)</h2>
<p>通常リンクと区別のない唐突な別タブでのリンクや、</p>
<p>ページ訪問時のポップアップでの情報掲載などは、</p>
<p>ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。</p>
<p>スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo01-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>リンク先を別タブで表示するときは、リンクに別タブで開くことをアイコンなどで明示する。</li>
<li>ページ訪問時の情報の載せ方は、突然表示するのではなく、<br />
明示的なボタンを置くなど、ユーザーのタイミングで表示できるように工夫する。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo01-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スクロール操作による特殊な動作(パララックスなど; 主にPC)</h2>
<p>パララックスのような、スクロールしたときの動作をブラウザ本来の動きとは違う動きにするデザインは、</p>
<p>ユーザーが本来行いたい操作を妨害するため、ユーザーをいらだたせる原因となります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo06-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スクロール操作は基本的にデバイス本来の動きに合わせていないとストレスになるため、パララックスなどの操作は避ける事が望ましい。</li>
<li>どうしても演出としてパララックスなどの効果が必要とされる場合は、スクロール感がデバイス本来の動きに近づくように厳密な調整をおこなう。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo06-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>ページ内のスクロール可能な箇所(主にスマホ)</h2>
<p>ページの中に高さを固定してスクロールできるようにした場所があると、</p>
<p>ページ全体のスクロールを妨害することになるため、ユーザーをいらだたせてしまします。</p>
<p>特にスマホでは画面が小さいため、深刻になってくることが多いです。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo02-01.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スマホでの表示のときは、SNSのタイムラインの表示は諦める(SNSページヘのリンクバナーなどに置き換える)。</li>
<li>マップは画面の横幅いっぱいに表示せず、横幅は画面の1/2〜2/3程度に抑え、代わりにマップへのリンクを置く。</li>
<li>記事の表示領域を狭めておきたい場合は、折りたたみなどの方法を使う。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo02-02.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スライダー等の自動スライド</h2>
<p>自動で動くスライダーは、製作者が見せたいと思うものを目立たせたり、</p>
<p>限られたスペースで見せたいコンテンツへ誘導する手段としてよく使われていますが、</p>
<p>これはユーザー自身が操作する場合には、操作を妨害したり、誤操作を招く原因となってしまうため、</p>
<p>実はユーザーにストレスを感じさせてしまいます。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo04-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スライダーの操作はユーザーに託し、操作可能であることがわかりやすいデザインにすることで、ユーザーによる操作を促す。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo04-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スマホ表示でのHTMLのviewport設定による拡大縮小の制限(スマホの場合)</h2>
<p>HTMLの&lt;head&gt;内で、以下のようにviewportの設定をすると、スマホでのユーザーによる拡大縮小の操作を制限することができます。</p>

		<div id="crayon-649540158ad9c774140592" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ad9c774140592-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ad9c774140592-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">'viewport'</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-01.html">DEMO(スマホご覧ください)</a></p>
<p>この設定は製作者が予期しない動作を制限する目的で行われることが多いのですが、</p>
<p>ユーザーが画像や小さな文字を拡大して確認するという操作を妨げますので、</p>
<p>場合によってはユーザーに不便な思いをさせてしまうことになります。</p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>viewportによる拡大縮小の制限をしない</li>
</ul>
<p></p>

		<div id="crayon-649540158ada1502367698" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ada1502367698-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ada1502367698-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width, initial-scale=1.0"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-02.html">DEMO(スマホご覧ください)</a></p>
<p>&nbsp;</p>
<h2>まとめ (ユーザーをいらだたせるWEBデザインの共通点と新たなWEBデザインを考える場合のポイント)</h2>
<p>ユーザーをいらだたせてしまうWEBデザインの共通点は、</p>
<p>ユーザーが意図していない動作をさせたり、ユーザーの操作を妨害してしまうという点です。</p>
<p>&nbsp;</p>
<p>製作者がどうしてもユーザーに見せたいという思いが強すぎると、</p>
<p>ついついユーザーの使い勝手を忘れて、</p>
<p>ユーザーにとっては不便なデザインとなってしまう場合があります。</p>
<p>せっかく見せたいと思って工夫をこらしても、</p>
<p>それがユーザーのストレスになってしまう場合は、</p>
<p>それらはユーザーにとって「邪魔なもの」として捉えられてしまうことになってしまいます。</p>
<p>&nbsp;</p>
<p>「見せたい」の前に「使いやすい」を前提にすることが、</p>
<p>新たなWEBデザインを考えだす上で必要なことだと感じました。</p>
<p>&nbsp;</p>
<h2>参考図書</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862462650/" target="_blank" rel="noopener">「デザイニングWebアクセシビリティ &#8211; アクセシブルな設計やコンテンツ制作のアプローチ」 2015.7.27 太田良典(著), 伊原力也(著)</a></p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4861009383/" target="_blank" rel="noopener">「融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論」 2015.1.21 渡邊恵太(著)</a></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2016/03/01

2016/02/24

2016/02/17

2016/02/09

2016/02/03

2016/01/26

2016/01/20

2016/01/20

2016/01/13

2016/01/13

2016/01/12

2016/01/06

2015/12/25

2015/11/11

2015/10/23

2015/10/14

2015/09/30

2015/08/26