背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
Credit Card Test Numbers and Paypal Test Accounts
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Basic Logo Design Process
2013年3月25日 Webデザイン 企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや？」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ 先日「ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！」という記事内で、なるほどな、と頷ける文章に出会いました。 WEBサイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち（ロゴに込められた物
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Beautiful Watercolor Effect Tutorial and Photoshop Brushes
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし 画像を開いて、そのレイヤーを複製します（コマンド＋J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ
2014年2月25日 Web関連記事, インスピレーション 私は普段紙の本をほとんど読みません。年に１冊読むか読まないか…。しかし、iPadを購入してからはなぜか電子書籍なら読むようになりました。ディスプレイで読む事の方が慣れているからですかね…？という事で私が最近読んだ無料の電子書籍をいくつか紹介します。日本語のものは比較的サクサク読めるものばかりなので、空いた時間に読んでみてください！ ↑私が10年以上利用している会計ソフト！ インタラクティブPDFでつくったインタラクティブPDFのつくりかた〜動画/音声再生・ページ効果編〜 ダウンロード InDesignで動画や音声付きのPDFファイルの作り方を説明してます。サンプルもついています。紙の本では表現できない、電子書籍の魅力はこういった点にあると思うので、これから電子書籍の出版を考えている人には参考になると思います。 地域でメディアづくり
Illustratorチュートリアル【女の子】
2013年11月28日 Illustrator 海外サイトでよく見るPhotoshopやIllustratorのチュートリアル記事って、見ていていろんな発見があります。自分が思っていたよりはるかに楽な方法や、知らないテクニックを教わったり。でも、日本語のサイトでそんなチュートリアルをあまり見かけないので、Illustratorでイラストを描いたのを記事にしてみました。動画も撮っておいたのであわせて見てみてください！ ↑私が10年以上利用している会計ソフト！ 動画撮ってみました 個人的に、他の人が作っていく過程を見るのが好きなので撮ってみました。ベジェ曲線での描き方など、参考になるかもしれません。一部撮り忘れたところもありますが気にしないでください。 まずは準備 ラフ画の取り込み ラフ画は別レイヤーにフリーハンドで描く事も多いのですが、今回は紙に描いたものを使いました。通常スキャナーなどで取
WordPressの検索機能をもっと使いやすくする
2013年4月1日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは本当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ 検索フォームの設置方法 まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。 <?php get_search_form(); ?>
WordPressでどんなサイトでも作れちゃう気になれる無料プラグイン9個
2016年6月8日 Webサイト制作, Wordpress WordPressのプラグインってすごいですよね。少しカスタマイズするだけで思い通りの機能のついたWebサイトを作ることができます。今回は「えっ、こんなことまでできちゃうの？」と思わせてくれるような高性能プラグインをいくつか紹介します。WordPress 3.0から追加されたマルチサイト機能を使えばWebサービスとして運営することもできそうなもの多め。どんな風に使おうかわくわくしちゃいますよ！ ↑私が10年以上利用している会計ソフト！ 1. SNS BuddyPress WordPressをSNSとして運営することができるプラグイン、BuddyPress。過去記事「WordPressプラグイン「BuddyPress」でSNSサイトを作成」で詳しく紹介しています。
あなたは何点？Webデザイナーのためのクイズサイト12
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
「焼肉 三十八」のリニューアルをしました！
2011年11月8日 Webサイト制作, Webデザイン こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。 受注 福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。 簡単なリニューアル時のご要望をまとめると下記６点でした。 お知らせ欄は更新可能 WordPressで構築 写真やテキストは流用 携帯版作成（コンテンツは一緒） ブログ・口コミ掲示板は削除 IE6は非対応でOK（ありがとうございます！！！） 制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeや
ミュシャ(Mucha)から学ぶ優美なデザイン | Webクリエイターボックス
2013年3月23日 インスピレーション アール・ヌーヴォー様式を代表するグラフィックデザイナー、アルフォンス・マリア・ミュシャ（Alfons Maria Mucha)。美しい女性やきらびやかな装飾類、花、華麗な曲線を使用したデザインが特徴で、生涯を閉じた今も多くの人を魅了し続けています。今回は私の大好きな彼の作品を紹介してみようと思います！ ↑私が10年以上利用している会計ソフト！ ミュシャの作品の特徴 女性と花 彼の作品の多くは女性をメインに花とともに描かれています。髪に飾ったり画面に花をちりばめたり。画家というよりもグラフィックデザイナー・イラストレーターとして活躍していたため、対象物を非常に鮮明に描いています。背景には暗色の幾何学模様や草花を、メインとなる女性には明るい色を使い、どこに焦点をあてているかがわかりやすい。 背景の模様 背景にはアール・ヌーヴォーの特徴である草花と曲線に
電子書籍を自分で出版してみよう！
2016年6月8日 Web関連記事, ダウンロード, 便利ツール スティーブ・ジョブズ氏の公式伝記が販売されて、各書店を賑わせてますね。この本は紙の書籍だけでなく電子書籍でも販売されています。iTunesストアでは本日もちろん一位に輝いています。そんな電子書籍を読みながら「電子書籍ってどうやって作れるのかなー？」なんて疑問に思ったので調べてみました。出版業界の人でなくても、「自分の本を出版する」ってなんだかワクワクしますよね。さっそく見てみましょう！ ↑私が10年以上利用している会計ソフト！ 電子書籍ってどんなもの？ 電子書籍とは、PC・MacやAppleのiPhoneやiPad、AmazonのKindleなどのディスプレイで読める書籍のこと。書籍はインターネット上で購入、ダウンロードします。ファイルを用意するだけでコンテンツを提供できるので、紙の書籍よりも低コストで手軽に作成できます。デ
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
コメント欄で使える10のWordPressプラグイン
2013年3月23日 Wordpress 私はブログを読んで、感動した！ためになった！わからない、助けて！という事があれば、ほぼ確実に名前＋写真入りコメントを残しています。ブロガーの皆様、いつもありがとうです。そんなわけで、コメントしやすい入力フォームには「おっ！」と感動してしまう事も。今日はそんなちょっと便利なコメント欄に使えるプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ 1. Akismet 特徴 WordPressに標準インストールされているスパム対策プラグイン。導入するとスパムコメントが劇的に減ります！設定も簡単なので必ず使用してほしいプラグインのひとつ。 導入方法 AkismetのWebサイトの「Get Started」から登録。無料プランでOK。 外観＞Akismet設定 からメールで送られてきたAPIキーを入力 2. Disqus Comment Sys
特殊な用紙・加工でかっこいい名刺が作れる印刷会社いろいろ
2013年7月8日 フリーランス, 便利ツール, 名刺 以前も「印象に残る名刺の作り方」などで名刺デザインについて触れたのですが、「こんな名刺はどこで印刷してもらえるの？」という質問をいくつか頂いたので、今さらながらまとめてみました。和紙や木目の素材、透明な名刺や型押し加工など、思い通りのデザインが実現できるかも！オンラインで注文できるので、気軽に利用してみてください！ ↑私が10年以上利用している会計ソフト！ データ入稿ガイド 今回紹介する印刷会社さんはすべてデータ入稿可能です。どの会社もデータ入稿専用のテンプレートが用意されているので、ダウンロードしてデザインします。用紙やオプション加工によってテンプレートが異なる場合があるので注意。データの種類や対応バージョンも事前によく読んでおきましょう。また、どの会社も用紙やオプション加工の無料サンプルを注文できるので、デザインし始める前に質感な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
