YouTube vs videoタグ 動画埋め込み比較
14.9MBの動画を、YouTubeとvideoタグの2種類の方法で埋め込んでみます。 （ネコちゃんの動画は、フリー素材コミュニティサイトの「Pixabay」でお借りしました。） videoタグ（html5） 回線速度70Mbps(PC)と20Mbps(スマホ)で見たところ、 14MB程度であれば、問題なく再生できました。最初の読み込み時間も大差ありません。 このページには埋め込んでいませんが、140MBの動画でも普通に再生できました。 ※videoの方は、Safariでサムネイルが表示されないので、posterを設定するか、ファイル名のすぐ後ろに続けて「#t=0.001」を記述しておくと見えます。 videoタグで動画を埋め込む場合の注意点 Webサーバに動画データを持つ事になり閲覧時に負荷がかかる。（データやユーザが多い場合はサーバスペックに注意） （今回「複数の大容量動画を多数のユー
第33回リクリセミナー「モバイルアプリ・WebデザインのためのSketch入門」参加してきました - デザイナーのイラストノート
2017/11/18（土）に行われた、第33回リクリセミナー「モバイルアプリ・WebデザインのためのSketch入門」に参加してきました。その感想とわたしの思うSketchの使いどころなどを書きました。 セッションの内容 今回はセッションとハンズオンが2つずつ交互に行われるというスタイル。長谷川恭久さんは「ツールの選び方」「SketchのSymbolの考え方」という2つを、スライドを使ってお話されました。 Sketchのシンボルは「オーバーライド」という機能をつかって、ページや状態に合わせてテキストやアイコンや色を組み替えることができます。これはデザインをシステム的に考える、伝えるのにはとてもいい機能なのですが、ついつい「シンボル作り」に注力して、他の人には理解不能な複雑なシンボルもできてしまいます。情報のカタマリとしてシンボルを作る、固定したい部分と変化させたい部分をきちんと考える、とい
[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 | Nagisaのすゝめ
2017年10月11日 [動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 Sketchで困っているコトがないかエンジニアに向けた社内アンケートを実施 こんにちわ、デザイナーリーダーの川畑です。 現在NagisaのUIデザイン開発では主にデザイナーがSketchで制作し、エンジニアが参照しながら実装しています。 今回は更なるエンジニア-デザイナー間の効率良い伝達のために、Sketchを参照する上でエンジニアが困っていることをヒアリング→デザイナーチーム全員で解決策を回答したので、記事として公開したいと思います。 Sketchの基本的な操作や機能は理解しているが、もっとうまく使いこなしたいデザイナーやエンジニアの参考になれば幸いです。 こちらの困っている声に応えました Lineheightが設定されたテキストボックスのマー
![[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 | Nagisaのすゝめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eda78adee654e21c638755de408942da82a74b9b/height=288;version=1;width=512/https%3A%2F%2Fblog.nagisa-inc.jp%2Fwp-content%2Fuploads%2F2017%2F10%2Fsketchtips-1-1024x512.png)
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
長いページでも飽きさせない3つの工夫 - Oisix ra daichi Creator's Blog（オイシックス・ラ・大地クリエイターズブログ）
初めまして。デザイナーの高橋です。普段はUI設計や改善を担当してます。 前回、出口さんの旬ページリニューアル事例のエントリーでは、 スマホファーストの考えに基づき、「読ませる」より「見せる」にデザインの方向性を決めて「ビジュアル訴求を高めた」事例について紹介しました。 では、どのようにして「見せる」ことを実現させるためにスマートフォン上のデザインで解決していったのか？ 今回はその事例をご紹介できたらと思います。 簡単に「見せる」と言っても、オイシックスの売り場の特徴はページの「長さ」にあります。 いかにしてお客さまがサイトに訪問していただいた時のテンションを維持したまま、ページの最後まで飽きずに「見て」いただくことが出来るかが、デザインの成功のカギだと考えています。 そのため、長さを極力意識させない工夫、またテンションを上げもらう工夫が必要です。 「見せる」ためにやったこと そのために具体
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
Higher Ground
Experience the extraordinary Housed in a heritage-listed powerhouse, Higher Ground is an all-day dining destination located in the heart of Melbourne’s CBD. Six connected levels wrap around the perimeter of the original brick building to create a suite of intimate tiered platforms. An evocative, inventive, and highly curated menu offers guests the very best that Melbourne has to offer. EAT Higher
長すぎるスマホサイトをスマートにリデザインする6つのコツ
スマホ対応していないWebサイトはもはや少なくなりましたが、あなたのサイトはよいUXを提供できていますか？ 「長すぎるページ」を解決するデザインのコツを紹介します。 進化の早いデジタルの世界におけるデザイナーの役割は、ユーザーに無駄な時間を使わせないようなシンプルなインターフェイスを提供することです。デザインをシンプルにした分だけ、よい多くのコンバージョンを期待できます。とはいえ、市場の大半をモバイルデバイスが占めている現在では、シンプルなインターフェイスを提供するのは簡単ではありません。 なによりモバイルデバイス経由のオンラインショッピングが増えている中で、モバイルユーザーにとって使い勝手が良いWebサイトを構築することが欠かせません。そこで問題になるのがロングスクロールのWebサイトです。 ロングスクロールページの問題 モバイルユーザーはロングスクロールWebサイトへのアクセスを敬遠し
UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD
ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ
しぶとく残るWebデザインの間違い・トップ10
大規模なユーザビリティ調査によって、現在、最も一般的かつ有害なWebデザインの間違いが明らかになったが、そうした間違いは意外なものでも新しいものでもなかった。つまり、それらは課題としてずっと続いており、Webサイトのユーザビリティを損ない続けているのである。 Top 10 Enduring Web-Design Mistakes by Amy Schade, Yunnuo Cheng, and Samyukta Sherugar on October 30, 2016 日本語版2017年2月23日公開 1996年以来、我々はWebデザインの間違い・トップ10のリストを作成してきているが、現在のWebデザインの間違いを調べるために、今年もアメリカとイギリスで215人の参加者からなる大規模なユーザビリティ調査を実施した。小さな地場企業からエンターテインメントサイト、非営利団体、グローバル企業に
【Webデザインの大鉄則】全デザイナー要確認の「シンプル・デザイン」10のコツ
Webデザインにはシンプル・イズ・ザ・ベストという原則がとてもよく当てはまることをご存知でしょうか。 デザインがシンプルな方が分かりやすく使いやすいので、閲覧者をアクティブユーザにしてくれる可能性が高いのです。 目的となるゴールを設定して、ユーザがそこにたどり着くのに差し障るものは徹底的にデザインから排除するのがベターです。 この記事ではそんなシンプル・デザインのコツを10の項目にまとめてたので参考にしてください。 1．行動のきっかけを作る ウェブサイトにはユーザに働きかける何らかの目的があり、目にしたユーザの行動に結びつくようなものでなければなりません。 ユーザにどんな行動をとってほしいのかを明確にし、目に入りやすい大きさと場所に配置してクリックしてもらいやすくしましょう。 2．合理的なページ数を そのデザイン、そこまでのページ数が必要ですか？ コンテンツを読みやすいボリュームにまとめて
デザイナーが3ヶ月間毎日続けている勉強法と感じている変化
みんなのウェディングのデザイナーが3ヶ月間毎日続けている勉強法の紹介です。
なんとなく白にしてない？Webサイトの背景色の引き出しを増やす、9つの具体例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。 アンジュルムの佐々木莉佳子ちゃんがとてもかわいいので、毎日がだいたい楽しいです！ さて、みなさんは、サイトの背景色ってどれくらい気にしていますか？ わたしは、なんとなく白を選んで置きにいってしまうことが多いんですよね……。でも、もっと幅広い表現のために、背景色の使い方の引き出しを広げたいなーと最近は考えています。そこで今回は、背景色の使い方が印象的なサイトを、使い方ごとに分類してご紹介します！ 強めの色を大胆に使う 1. heyblend http://www.heyblend.com/ アメリカのクリエイティブ集団のサイト。 背景色に赤を大胆に取りいれていて、かっこいいですよね！ 赤といっても少し白が混ざったような色で、大人っぽいスタイリッシュな雰囲気にまとまっています。下層ページも潔く赤いんですが、写真とぶつかることなく、うるさくないのにしっかり個性的。こうい
2016年、Webデザインの考え方、Photoshopの効率的な使い方、制作現場の生のテクニックが分かる生ビールみたいな本
Webデザインの今が分かる良書「Webデザイン必携。」が、Kindleセールでかなりの激安です。 デザイナーとしてWeb制作で役立つ必須知識、基本的な考え方、効率的なデータの作り方など、制作の現場ですぐに役立つ知識やテクニックを身につけることができる一冊です。 表紙のデザインは、完全に生ビールです！ 参考写真: 写真AC ※版元様に許諾を得ています。 ここ数年で、Webデザインは大きく変わりました。 ビットマップからベクターが主流になり、ページはマルチデバイス対応、パララックスなどのインタラクション アニメーション、最小要素からデザインする「Atomic Design」など、成果物やワークフローも進化を続けています。 本書は制作現場のナマの知識が学べ、Webデザインの初心者だけでなく、現役でバリバリ活躍している人にもオススメの本です。 Kindle月替わりセールで書籍版の半額以下、さらに2
デザイナーが他のデザイナーのバナーをブラッシュアップする「バナーデザインくるくる会」をやりました | デザイナーのイラストノート
@ misumi_takuma さんがTwitterで「よくあるデザインのBefore/Afterは、最初からBeforeのクオリティが低く感じる、デザイナーが作ったものをBeforeにするとどうなるのか」という話をしていて、デザイナーが作ったものを交換してデザインをブラッシュアップしていく「バナーデザインくるくる会」というのをやりました。 制作のお題準備 今回作成するバナーは、よくあるサイトのトップページに大きく表示されるバナーです。バナーは「この先の情報を読んでほしい」という目的がはっきりしているので、こういったお題には向いています。しかしこの情報とバナーの作成要件だけではデザインはできません。そこで各お題には 「トーン＆マナーの参考サイト」 を1サイトずつ用意しました。ターゲット層と、色やフォントを選ぶ際の参考にします。 制作手順 お題と使用する写真は当日配布 制作はPhotosho
プロのデザイナーが実践している！PhotoshopでWebデザインを素早く、効率的にするための8つの方法
PhotoshopでWebデザインのワークフローを効率的にするために、プロのデザイナーが実践している8つのテクニック・方法を紹介します。 Adobe CCのライブラリをもっと活用しよう、と思いました。 8 ways to design sites faster in Photoshop 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. ファイル管理のポイントは構造化 2. CSSフレームワークは勉強になる 3. PSDのレイヤーはコンテンツごとにフォルダ分け 4. よく使う操作はショートカットを覚える 5. Adobe CCのライブラリは使わないと損 6. イメージとベクターはスマートオブジェクトで 7. スタイルガイドをどう活用するか 8. コーダーと、そしてチーム内での共同作業 まとめ: デザインは正直に 1. ファイル
ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？ ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイス解剖学（公開版）
https://geechs-magazine.com/tag/tech/20170227_2
