背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
『Webデザイン受発注のセオリー デザインコントロールが身につく本』(片山良平)の感想(16レビュー) - ブクログ
デザインの発注ー受注の間の様々な混乱やコミュニケーションのロスやミスを回避するあるいはすっきり整理するための方法が、作業の段階を追ってまとめられています。 双方にとって「よいデザイン」を生み出すための指南書。良書です。(^^) 【無断転載を禁じます】
[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary
私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。 たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。 なぜスケッチが必要か？ 多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。 なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。 デザインは、ソフトが自動的にやってくれるものではありません。 自分の力で1から作る必要があるのです。 そのために、「良いデザイン」とされてい
![[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab5cbd3dd1186ff326b5535187635828fcee5c0/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2F8c4a9bf2a4c1d3459b7f3b5db1bf2eb5-500x304-1.png%3Ffit%3D500%252C304%26ssl%3D1)
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
デザインが素敵な日本語Facebookページ 10選
Facebookページは2012年3月30日にタイムラインを採用した新デザインに全面移行するのに伴ない、デザインが素敵な日本語Facebookページ10選も新デザインに移行したページから再選出させていただきました。 2012年3月17日時点で、新デザインに移行している日本語Facebookブランド・企業ページは上位200位のうち、33ページに過ぎません。後2週間を切ってますので、以下のガイドを参考にしていただき、新デザインへの準備を怠りなく。 新Facebookページ 使い方・移行方法 目次 1. 新Facebookページ 使い方・移行方法 まとめ 2. 新デザインをプレビューし、準備が出来れば切り替えましょう 3. カバー写真などイメージを変更しましょう 4. Facebookの自己紹介（基本データ）を書きましょう 5. トップ掲載する写真、アプリを整理しましょう 6. 大事な出来事を設
WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
「ルール」を打ち破るWebデザイン
2017年6月29日 Webデザイン Webデザインの「ルール」。そのいくつかを聞いたことがあると思います。でも「やってはいけない」「やらなければいけない」なんて聞いたら壊したくなるのが人間というもの（私だけ？）。今回はそんなWebデザインのルールを打ち破る素敵なサイトをNoupeで紹介されていたので翻訳してみます。次回のWebデザインの参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ Webデザインの「ルール」に関する記事を見た事があると思います。事実、いやになるほど頭にインプットされている事でしょう。そして多くの場合その「ルール」は楽に生活を送るためのガイドラインとして役立っています。 しかし、あなたのアイデアがそのルールに当てはまらない場合、またはあなたがとにかく全てを型に当てはめるのにうんざりして、自分の創造力に挑戦したい場合はどうでしょう？そのルールは本当に変更
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
pukiwiki、はてなトップページの妙な恐怖感
尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38
就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 最新版書きました！こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう！2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記
Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント
Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日本サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ
【デザイナー修行日記】 ウープスデザインの石嶋さんにいろいろ教わった！ - IDEA*IDEA 〜 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
ギャラリーを作成する為のjsやWPテーマ、プラグイン、Flash、CMSなど47点
何かと需要の高いWebギャラリーを 作るためのjqueryプラグインなどのjs やFlashギャラリー、WordPressでサクッ と作るためのプラグインやテーマなどの まとめです。 柔軟性を考慮し、FlickrなどのWebサービスから引張るようなギャラリーは割愛しました。全部で47点。稼動するか未検証なものもありますので参考程度に。探せばまだ有りそうです。 マウスオーバーで画像を出すようにしているので二度手間が少ないかなと思います。やや表示に時間がかかるかも。 javascriptjQuery Gallery Slider / マウス移動でダイナミックに。IE6~8、他各種ブラウザ対応with Semi-Transparent / キャプション付jqueryプラグイン。自動で切り替わるImage Rotator / サイドにサムネイル。jquery使用。手動切り替えGalleryView
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WEBデザイン】原研哉さんを中心に巻き起こった深夜のフォント熱論まとめ
http://rekryt.mil.se/recruitment2009/