モバイルデバイスを使用する際、人は片手で、親指を使い操作する傾向があるということが研究により明らかになっています。 マウスの役割を果たす親指 モバイルデバイスを親指で操作する場合、デスクトップデバイスでマウスを使う場合とは異なり、画面上で触れることのできる範囲が限られてきます。この範囲は、デバイスのサイズと、持ち手によって変わります。 メニューボタンを指の届かない範囲に置いていると、ユーザはデバイスを持ち直したり、もう一方の手を使わなければなりません。 画面のサイズ 大きな画面のデバイスを選ぶユーザが多いので、画面の上部はタッチしづらい領域になってきています。 大きな画面のデバイスでは、持ち手と反対側の隅に親指が届きづらくなります。 反対に、小さな画面のデバイスでは、画面の下部全体に親指が届きやすくなります。 親指の届く範囲の法則 デザイナーは、ユーザの持ち手を変えることはできませんが、ナ

UX Planet UX Planet is a one-stop resource for everything related to user experience. 「ファブレット」という言葉を知っているでしょうか。「Phone」と「Tablet」を組み合わせた造語であり、画面のサイズが大きめのスマートフォンなどを指します。この記事では、ファブレットのために、iOSとAndroidのタブバー/ボトムナビゲーションをデザインする際の5つのベストプラクティスをご紹介いたします。片手の親指の届く範囲というのがデザインの鍵となります。 ハンバーガーメニューが最適なアプリナビゲーションであるかという議論が熱い時代はもう過去となりました。メニューは画面の一番上にあり、ファブレットサイズのデバイスにて親指でそこをタップすることは不可能だからです。 実際には、私たちは手に持つタイプのデバイスにおいて

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

Atomic DesignとCSS設計 第1回 Atomic Designとは何か 「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。 はじめに Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。 Atomic Design by Brad Frost 著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。 Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコ

JavaScriptで時間のかかる処理などをバックグランドで並列実行できる「Web Worker」を使ってみます。 Web Workerについて Web Workersの対応ブラウザはこちら Web Workerには呼び出し元のスクリプトのみアクセスできる「Dedicated Worker」と、複数のスクリプトからアクセスできる「Shared Worker」があります。 実際に使う際の注意点として、WorkerからDOMにアクセスできないため、windowやdocumentにもアクセスできません。 Dedicated Worker Dedicated Workerを簡単に使ってみます。 上記で記述した通り、Dedicated Workerは呼び出し元のスクリプトのみがアクセスでき、以下のサンプルだとsample.jsが呼び出し元になります。 sample.js // Workerの作成 v

WebWorkerとは？ 初心者です。 WebWorkerとはjavascriptでマルチスレッドを行うための仕組みです。 マルチスレッドとは、複数の処理を同時に行うことです。 例えば、描画処理などで ・データ取得処理 ・取得したデータの描画処理 を同時に行うと描画が滞りなく行われます。 処理を同時に行わない場合は、 の様に処理A、Bを同時に行ってスムーズに描画するという機能です。 （あくまで一例。処理が軽い場合は普通に記述して問題ない） 非同期処理は？ javascriptは非同期処理でpromiseなどありますが、 あれは処理の順番を変えているだけで同時に処理を行うものではありません（でした）。 非同期処理　＝　並行して処理を行ってくれる と考えがちですが、javascriptは（原則）違います。 概要とか特徴 概要 ・メインスレッド(main.js)　←メイン処理 ・サブスレッド(d

[レベル: 上級] 将来的に、AMP で JavaScript を利用できるようになるかもしれません。 2月にアムステルダムで開催された AMP Conf 2018 で AMP チームのエンジニアリング・リード、Malte Ubl（マルテ・ウーブル）氏がその可能性について言及しました。 Web Worker（ウェブ ワーカー）という技術を用います。 JS を使えない AMP AMP では任意の JavaScript の利用が非常に厳しく制限されています。 AMP で許可された以外の JS を使うことは基本的にはできません。 理由は、パフォーマンスを低下させる大きな要因に JS がなるからです。 しかし、JS が使えないということは現代のウェブにおいて当たり前のように使われているさまざまな機能を利用できなくなることを意味します。 任意の JS が使えないことが AMP を敬遠させる理由の1つ

Accelerated Mobile Pages、略してAMP。 モバイルページが驚くほど早く表示されるこの技術。 リリース以降徐々に広がってきており、Googleの検索結果でもAMPのロゴをよく見るようになってきました。 ※AMP表示の例 さて、弊社でもWordPress用AMPデザインテーマ「AWESOME」を無料配布しています。 AMPテーマ開発の際の難点が、成約が多すぎるという点が挙げられます。 やりたくても出来ないことが沢山あるからです。 AMP用のhtmlやcssの容量の成約（50kb以内)などなど。 その為、jqueryを使ってできていたことが、AMPでは出来ないためとてもシンプルなUIになりがちです。 ですが、実はハンバーガーメニューやスライダーといったアニメーションはAMPでも実装できることをご存知ですか？ 今回はAMPでも実装できるハンバーガーメニューメニューやスライダ

[レベル: 上級] Android版の Chrome Canary と Chrome Dev でWebAPKの機能を利用できるようになりました。 WebAPKを利用すると、PWA (Progressive Web App: プログレッシブ ウェブ アプリ)を実装したサイトをアプリのように扱うことができます。 WebAPKの設定手順 WebAPKを設定する手順を説明します。 まずChrome (CanaryかDev) でパッケージ化の機能を有効にします（この機能はまだ試験運用中のため）。 次のURLで構成できます。 chrome://flags/#enable-improved-a2hs 『「ホーム画面に追加（改訂版）」機能を有効にする』のセクションです。 設定変更後はChromeの再起動が必要です。 また、セキュリティ設定で「提供元不明のアプリ」の有効化も必要です。 準備が整ったら、Web

サイト運営を請け負っていると「新しいスタッフが入ったから紹介ページの更新よろしく」と言われることがあります。しかし、1人のスタッフのためにプロカメラマンは頼めません。結局、誰かが撮影することになります。 ありがちな失敗写真「首切り」 さっそくクライアントを訪ねて、新入スタッフの撮影と自己紹介の取材をすることになりました。入社動機やこれからの抱負など、気さくに話してくれる人でホッと胸をなでおろして、撮影も無事に完了。クライアントのOKも出たので、デザイナーに依頼してスタッフ紹介ページを更新してもらいました。 ところが、しばらくしてスタッフ紹介ページの元の写真を撮影したカメラマンから、クレームが……。 「あの追加した写真、あれはダメだよ」 「えぇ！　なんで？　そりゃ素人ですけど、そこそこ撮れたはずですけど」 「首をホワイトボードで切っちゃってますよね。これは首切りって言ってダメな構図です。商業

そもそも、トリミングのタブーを知りたいのですが。 先日、「人物の動画の撮り方セミナー」に参加し、そこで「人物を撮る際の撮影サイズ（ショット）」を習いました。これは、動画だけでなく、静止画の撮影でも大変参考になると思い、ここでご紹介したいと思います。 まず、動画の場合、人物を撮影する際に人物が安定する基本的なショットがあるようです。 ちなみにテレビのほとんどのクイズ番組やトーク番組などはこのショットで撮られているとのこと。 この法則に従い、同じ手法を写真撮影やデザイン作成の際に取り入れると、バランスのよい写真のトリミングができます。 ショットの種類は下記の6つです。 １．クローズアップ ２．アップショット ３．バストショット ４．ウエストショット ５．ニーショット ６．ロングショット トリミングの範囲を見て、何か気づくことはありませんか？ 実は「関節」が避けられているのです。 図をよく見てく

突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか？ 赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMP HTMLで構築されたWebページに遷移します。 リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。 これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。 「最近よく聞くけど、AMPってなんなの？」と疑問をお持ちの方も多いのではないかと思います。 SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。 AMPのメリットや設定方法について、こちらの動画でもわかりやすく解説しています。 記事とあわせてぜひご覧ください。

この記事はトレタ Advent Calendar 2017の11日目の記事です。 dev.toで最近話題になったPWA実装ですが、今日はそのPWA設計パターンの１つであるPRPLを実践するために必要な技術スタックとその実装方法についてまとめました。 PRPLパターンとは Googleが提唱するPWAの設計パターンの１つです。 PRPL パターン  |  Web  |  Google Developers (P)ush: HTTP/2 Pushを用いて初期表示に必要なリソースを配信します (R)ender: 最小限の初期描画を行い、インタラクティブな状態にします (P)re-cache: ServiceWorkerを用いて事前に他のルートのリソースをキャッシュします (L)azy-load: ユーザー操作に合わせてオンデマンドにリソースの配信と生成を行います これらの頭文字をとってPRPLと

2018年3月26日に開催された日本Androidの会 Web Working Group「PWAに備える3ヶ月」vol.1 での講演資料です。 まずは労力最小でPWA対応したWordpress＋WooCommerceのECサイトを動かしてみます。 そしてそこで中心となる「Service Worker」に焦点を絞ってその役割や挙動を掘り下げていきながら、Web制作者が欲しいものを作るのに何をすればいいのかを探ります

追記: Canary じゃなくてもいいらしいのでタイトル修正した。が…実装具合はよくわからない 今年中に来るとは聞いていたやつ。要はウェブアプリを デスクトップアプリ化する。Electron と違って Chrome の Sandbox と同じ権限で動いている Twitter Lite をデスクトップ PWA にして使ってるんだけど、最 & 高です。 Mac だと Chrome Canary で enable-desktop-pwas のフラグを立てると使えます。 pic.twitter.com/0TPhe8gyQL— Eiji Kitamura / えーじ (@agektmr) 2018年7月12日 ちなみに Chrome Canary + フラグは上級者向けなので、自身のない方はいましばらくお待ち下さい。そのうち安定版で普通に使えるようになります。— Eiji Kitamura / えー

PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog

デザイン部でフロントエンドエンジニアをしているkitoです。 先日、iOS 11.3のリリースでiPhoneでもPWAの一部の機能が利用できるようになりました。（プッシュ通知等は利用できない）今回は、Web界隈で急速に注目を上げ始めているPWA（Progressive Web Apps）の将来性を考察したいと思います。 いわゆるフロントエンド界隈では、新しいツールや技術が短いスパーンで登場しては消えていくということを繰り返しています。新陳代謝が激しい故に、革新的な技術がいち早く取り入れられる若々しいエコシステムは利点ではありますが、反面、苦労して学習した技術やツールが、立ちどころに古びて投資が無駄になってしまうケースも間々あります。これは現代のフロントエンドエンジニアには避けられない運命でしょう。とはいえ、それをむしろ楽しみ新しい技術の到来やそれをリードする若きエンジニアたちの登場を喜ぶべ

こんにちは、Google AdSense 公式ヘルプコミュニティ エキスパートの竹中です。 「アドセンス広告を設置できるのは1ページに3つまでだよね！」 これは昔からある有名なアドセンスのポリシーの一つでしたが、2016年8月中旬から広告設置数の上限が撤廃されました。つまり今までは1ページに3つまでしか設置できなかった『コンテンツ向け AdSense ユニット』ですが、今後は4つ以上の設置が可能となりました。 ポリシーの新旧を見比べると広告の数についてはアドセンスのポリシーに関するヘルプページに記載されております。今回改定された新しい内容と以前までの旧内容を見比べてみましょう。 旧ヘルプページの内容まず以前まで表示されていた旧内容です。 ※上図は以前まで表示されていたページ はっきりと下記のように広告設置数について記載がありました。

photo credit: Google Logo Search via photopin (license) はてなブログ、ライブドア、FC2、Seesaa…３月中旬以降、無料ブログではGoogleAdsenseに登録できなくなったらしい。 どれだけ需要のある話か分からないのですが、いちおう現状の連携だけ。 このブログの開設当初に、以下のようなグーグルアドセンス登録方法の記事を書いてまして。 penguin-diary.hatenablog.com 検索でもそれなりに上位に出るので、今でもわりとご参照いただいているわけですが、ここ数日、「この通りやってもできない」「初期の登録画面で入力エラーになる」という言及をいくつかいただいています。この方とか数人。 そのエラーメッセージとは、 まだウェブサイトがありません。 URL にはパス（example.com/path）やサブドメイン（subd

Discover recipes, home ideas, style inspiration and other ideas to try.