HTMLでのvideoタグを使った動画の埋め込み方法を解説！属性の使い方や注意点も | Web Design Trends
動画配信サービスには、例えばYouTubeやVimeoなどがあります。Webサイト上でそれらのサービスを使って動画を埋め込んでいるケースはよく見かけますね。単にWebページの中で動画を紹介したい場合は、外部サービスを使って埋め込んだ方が手軽に利用することができます。 一方、自分でサーバーに動画ファイルをアップロードしてvideoタグを使って埋め込む方法もあります。ファイル形式はMP4（.mp4）で用意しておけば基本的に問題ありません。 videoタグを使う場合は、YouTubeなどの動画埋め込みで表示されてしまうサービスのロゴや、固定表示されてしまう要素などを気にする必要がありません。背景動画として埋め込む場合などはvideoタグを使う方法がおすすめです。 ただし、サーバーに動画ファイルをアップロードして読み込みを行うと、サーバーの転送量が増えたり負荷が高くなったりする可能性もあるので、注
【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends
Webサイトにファビコン（favicon）を設定しておくことで、ブラウザのタブやGoogleの検索結果にアイコンが表示されるようになります。 今回は、2021年現在のファビコン（favicon）の設定方法とおすすめの作成ツールについてご紹介したいと思います。 ファビコン（favicon）とは？ ファビコンとは、Webページごとに設定されるブラウザのタブなどに表示されるアイコンのことです。 PCのブラウザでWebサイトを開くと、タブごとにサイト名の隣にアイコン画像が表示されますが、その画像はWebページ側で指定したアイコンが表示されるようになっていて、ブラウザでの見た目が分かりやすくなるだけでなく、Webサイトのブランディングやイメージ作りにも影響を与えます。 ファビコンは、主に下記の箇所に表示されます。 必ずファビコンを設定しないといけないわけではありませんが、ファビコンが設定されていない
おしゃれなポートフォリオが作れるWordPressテーマ10選 | Web Design Trends
WordPressを使えば、あまりWebに詳しくない方でも簡単にポートフォリオサイトを作ることができて、管理画面から簡単にコンテンツを更新することができます。 今回は、ポートフォリオサイトにおすすめのWordPressテーマをご紹介したいと思います。 【2023年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends ポートフォリオサイトのWordPressテーマ選びのポイント 画像中心のテーマがおすすめ ポートフォリオサイトを作りたい人の中には、エンジニア、デザイナー、フォトグラファーなど様々な職種の人がいると思いますが、写真中心の
2020年版：XDがもっと便利に！おすすめのプラグインまとめ | Web Design Trends
WebやアプリのUIデザイン制作に使われる機会の多いAdobe XDですが、「プラグイン」を活用することによってもっと便利に使うことができます。 現在では様々なプラグインが登場していて、どのプラグインを使えばいいのか分からないという方も多いのではないでしょうか。 今回は、Adobe XDのおすすめプラグインをまとめてご紹介したいと思います。 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends XDにプラグインを追加する方法 XDでプラグインを追加する場合には、メニューから「プラグイン＞プラグインを見つ
WordPressの投稿ページに目次を配置してデザインを変更する方法 | Web Design Trends
メディアやブログのコンテンツページに目次を設置することで、ユーザーにそのページに書かれている内容を最初に伝えることができるので、ユーザビリティの向上に繋がります。 WordPressを使っている場合は、「Easy Table of Contents」というプラグインを使えば、簡単に機能性の優れた目次を配置することができます。 今回は、WordPressの投稿ページに目次を追加して、デザインを変更する方法をご紹介したいと思います。 【2023年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends 目次を表示する目的 目次を表示すること
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
CSSで要素を横並びにする方法のメリット・デメリットまとめ | Web Design Trends
Webコーディングを行う時に、初心者が悩みがちなトピックとして「どうやって要素を横並びにするか」というものがあります。 要素を横並びにするCSSの書き方として、大きく以下の5つが主要な方法ですね。
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
WordPressがさらに便利に！おすすめのプラグイン13個まとめ | Web Design Trends
WordPressはプラグインを使うことによって、SEO対策から関連記事の表示、ページの表示速度改善など、様々な機能拡張を行うことができます。 ただし、プラグインの数が増えすぎると逆に処理が重くなってしまって読み込み速度が遅くなってしまったり、相性の悪いプラグインがあると上手く表示されないということもあります。 なるべくプラグインの数を減らしつつ、便利な機能は使いたいという方のために、本当に使えるWordPressのおすすめプラグインをまとめました。 WordPressのプラグインを追加する時の注意点 WordPressのプラグインは、入れれば入れるほどいいという訳ではありません。 むしろ、プラグインの数が増えすぎてしまうと逆効果となってしまう場合があります。プラグインを追加する前に、下記の項目を確認してから追加するのがおすすめです。 そのプラグインは本当に必要か？ プラグインの数が増えて
小さな動きで大きな効果！マイクロインタラクションを使って優れたUXを実現する | Web Design Trends
優れたサービスは、「機能」と「細部のデザイン」の2つが優れています。「機能」はユーザーがサービスを利用するきっかけを作り出し、「細部のデザイン」はユーザーがサービスを継続して利用するために大きな役割を果たします。実際に、私たちがよく利用しているサービスは細かい所のデザインまでしっかりと考えられて作られているものがほとんどです。 マイクロインタラクションは、ユーザーにフィードバックを与えるための最良の手法の1つです。 ユーザーを第一に考えた場合、Human-Centered Design(人間中心設計)にたどり着きます。マイクロインタラクションはデザインの「おまけ」のような扱いをされることが多いですが、マイクロインタラクションがユーザーに与える影響はとても大きく、操作性を高め、幸福感などをもたらします。デザイナーはマイクロインタラクションの重要性をもっと理解し、サービスを利用するユーザーの気
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
