サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
www.webdesignlibrary.jp
投稿日：2016年4月15日 このチュートリアルではeコマースのトレンドデザインを紹介します。 Step1 ： はじめに Step2 ： トレンドデザイン集 このごろeコマースは巨大ビジネスであるということは秘密ではなくなり、この産業は発展し続けています。 もちろんeコマースはユーザー体験やトレンド、そして新しいテクノロジーに深く依存しています。 もしあなたのeコマースウェブサイトがみすぼらしいデザインであったり、ユーザーが期待する外見や機能と一致していなかった場合、それは絶望的です。 当然eコマースデザインのもっとも大きなトレンドは途切れることのないユーザー体験です。そして他のトレンドと一時的な流行はすべてそこから発生します。 レスポンシブ グーグルがアルゴリズムを変更した時以降、モバイルからの検索結果に表示されるモバイル対応されていない友好的なウェブサイトを排除するために、反応性はもっ
投稿日：2016年01月29日 ソフトウェア： このチュートリアルではPhotoshopでHDRを使うチュートリアルをご紹介します。 Step1 ： はじめに Step2 ： 彩度を下げる Step3 ： 階調の反転 Step4 ： ぼかし（ガウス） Step5 ： リニアライト Step6 ： 完成 「このチュートリアルでは、どのようにクールなイメージエフェクトを作るかをお見せします。 HDRまたはHDRiは、『ハイダイナミックレンジイメージ（High Dynamic Range imaging）』の略で、デジタル写真やコンピュータグラフィックス画像の明るいエリアと暗いエリアの差を大きくするテクニックです。 なお今回のこのチュートリアルには美しいブルガリアの風景写真を使用していきます。
投稿日：2015年12月18日 このチュートリアルではWordPressの上部に出る空白行についてを紹介します。 Step1 ： はじめに Step2 ： コードを確認 Step3 ： ファイルを調べる Step4 ： 問題が起きてしまった例 Step5 ： 最後に
投稿日：2015年11月13日 このチュートリアルでは、ヒーローヘッダーはじめにのテンプレートをご紹介します。 Step1 ： はじめに Step2 ： 導入の際に考えておくべきこと Step3 ： ヒーローヘッダーのテンプレート集 最近のウェブデザインの大きなトレンドの一つに、ヒーローヘッダーがあります。ヒーローヘッダーとは、サイトのトップに大きな画像を表示しているデザインのことです。最初のころは、ヒーローヘッダーといえば、コンテンツに直接関係する大きなサイズの写真のことで、通常はウェブサイトのオーナーや仕事（主に、ポートフォリオサイトで）の写真が使われていました。 最近は、ヒーローヘッダーで使われる写真は、シンプルで高解像度のものが主流です。デザイナーも好んでよく使うので、イラスト、ベクター形式の画像、アニメ要素のある画像、画像のスライダー、ビデオなど、いろんな形式のヒーローヘッダーに
Home ＞ グラフィック講座 ＞ ちょっとした小技：Illustratorで簡単なパターンを使ったかっこいい背景の作り方 ちょっとした小技：Illustratorで簡単なパターンを使ったかっこいい背景の作り方 投稿日：2015年5月8日 ソフトウェア： このチュートリアルでは、Illustratorで簡単なパターンを使った背景の作り方を紹介します。 Step1 ： はじめに Step2 ： 背景の準備 Step3 ： パターンを選択 Step4 ： 背景を設定 Step5 ： 色を設定 Step6 ： 文字を浮かび上がらせる Step7 ： 完成 Step8 ： アレンジ IllustratorやPhotoshopのレベルが上がってくると、デザインの目標を見失い、複雑なことに没頭してしまいがちです。これは、教える方にも当てはまります。無数のアンカーポイントでグラデーションメッシュをす
Home ＞ HTML&CSS講座 ＞ HTML LocalStorageを使って、フォームに入力した値を保存しておくjQueryプラグイン HTML LocalStorageを使って、フォームに入力した値を保存しておくjQueryプラグイン 投稿日：2015年2月20日 このチュートリアルではフォームに入力した値を保存しておくjQueryプラグインを紹介します。 Step1 ： はじめに Step2 ： Garlic.jsとSisyphus.js：フォームの入力内容をLocalStorageに保存する この問題はWEB上にフォームが現れてからずっと存在し続けています。 入力フォームが長ければ長いほど、大きな問題となる可能性があります。 その問題というのは、あなたがコンピュータを使い始めて以来、何度となく直面してきた問題です。 入力項目の多いフォームを入力し終えた時や、奥さんに今日注文する
Home ＞ ウェブデザイン基礎講座 ＞ 2014年のまとめ - ウェブデザインラブラリーで学んだこと 2014年のまとめ - ウェブデザインラブラリーで学んだこと 投稿日：2015年01月09日 このチュートリアルでは、昨年ウェブデザインラブラリーで学んだことをご紹介します。 Step1 ： はじめに Step2 ： おさらい この2週間ほど、2014年のことを思い出し、考えていました。 今年は色んな出来事がありました。 色んなことを学びましたし、変更もしました。 基本的な変更のひとつにこのブログのデザインを変えたことがあります。 今は完全にレスポンシブになっています。 お気づきでしたでしょうか？ 昨年学んだ中で、最も価値があり興味深いものを下記に集めました。 ウェブサイトの優れたタイポグラフィに最適なツール ウェブサイトのもっとも素晴らしいタイポグラフィがどこからやってきたかを考えたこ
Home ＞ ウェブデザイン基礎講座 ＞ Web Design Libraryにある新しい20個のワードプレステーマ Web Design Libraryにある新しい20個のワードプレステーマ ebDesign Library にいる私たちは、ワードプレスが大好きです。 今まで作られた中で一番すばらしいウェブツールだと思います（もちろん、個人的な意見ですけど）。 「一番すばらしい」には議論の余地はありますが、「ワードプレスが最も使われているウェブ上のプラットフォームのひとつである」ことに異議のある人はきっといないと思います。 （ところで、だれかこれを示す最新の統計はもっていませんかね？） きっとあなたもワードプレスが大好きだと思います、どうやってそれがわかるかって？ ワードプレスのテンプレートは、当サイトのもっとも人気のあるプロダクトなんです。 そこで、より好きになってもらうために、私たち
投稿日：2014年11月28日 ソフトウェア：- このチュートリアルでは新旧さまざまなウェブデザイナーが蓄積した知識が詰まった本を紹介します。 Step1 ： はじめに Step2 ： ウェブデザイナー向けの書籍 Step3 ： 最後に 食品業界や外食産業で働いている人ならご存知だと思いますが、食品を売るにはまず顧客の視覚に訴えることが大切で、味覚はその次です。 それにも関わらず、食品関係のウェブサイトのオーナーの多くが、サイトの訪問者がまず最初に見た目で購入を決めるということを忘れてしまっているのはおかしな話です。 実際、あなたのお住まいの地域のレストランが運営するウェブサイトを開いてみてください。 全体のデザインの中でメニューなどの文字情報に集中し過ぎていて、ジュージューと焼けるステーキやパスタの芳醇な香りで思わず注文をしたくなったり、友達に話したくなったりといった視覚に訴える工夫
投稿日：2014年11月14日 このチュートリアルでは装飾的なCSSギャラリーを紹介します。 Step1 ： はじめに Step2 ： 基本スタイル Step3 ： :before要素 Step4 ： アートフレーム Step5 ： HTML5ギャラリー Step6 ： CSS3 変形 Step7 ： Nth-of-Type Step8 ： アップデート かなり前になりますが、<span>タグをひとつ追加で使って、装飾的なイメージギャラリーを作成するチュートリアル</a>を書きました。 その時はspanタグを加えるのにjQueryを使いましたが、あまりユーザーフレンドリーではありませんでした。 今日はJavascriptを使わない、より良い方法をご紹介します。 :beforeや:afterの疑似要素を使えば同じ結果が得られるのです。 :before要素はあまり使われませんが、追加の要素やコ
Home ＞ ウェブデザイン基礎講座 ＞ Bootstrapのテンプレートとは何か？なぜ必要なのか？ Bootstrapのテンプレートとは何か？なぜ必要なのか？ 投稿日：2014年9月26日 ソフトウェア：- このチュートリアルではBootstrapのテンプレートについてを紹介します。 Step1 ： はじめに Step2 ： Bootstrapの魅力 Step3 ： テンプレート集 Step4 ： 関連情報 レスポンシブでありながら、カスタマイズが簡単で美しいデザインのWebサイトテンプレートをお探しなら、Bootstrapで構築されたものが良いでしょう。 Bootstrapの何がそんなに特別なのでしょうか？ また、テンプレートが何で作られているかをどうして気にする必要があるのでしょうか？ それでは一緒に見て行きましょう。 デザインが特に優れていると思う最新のアプリやウェブサイトを見
ピンタレストは、ソーシャルメディア世界の新星です。 みなさんご存知のとおり、このピンタレストは女性たちが使うサイトにとどまりません。 ピンタレストは強力なマーケティングツールでもあるのです。 今回は、フォトショップチュートリアル付のピンタレストボードをいくつかシェアさせていただきたいと思います。 写真の加工、図形の描画、テキストの効果など、たくさんのチュートリアルがみつかります。 これらのボードはフォローしておいて間違いありません。
投稿日：2014年8月29日 このチュートリアルでは、フリーのアイコンをご紹介します。 Step1 ： はじめに Step2 ： フリーアイコン集 一つの質問に答えていただけますか？ デザインの中で最も小さくかつ重要な要素の一つといえば何でしょうか？ そう、アイコンですね。 サイズが小さいのにウェブサイトのデザインに果たす役割が大きいといえるのは、このイメージがオブジェクトやプログラムの象徴だからです。 アイコンは顔なのです！ 一般的には、いいアイコンはすべて無料ではありません。 魅力的なアイコンでウェブサイトを飾るのにいくらかのお金を払う必要があります。 しかしそのルールには例外もあります！ dribbble.comをスクロールして、あなたのために私が紹介する魅力的で無料のアイコンを見てください！ 無料で質のいいアイコンを見つけることは簡単ではないので、ここでアイコンを選ぶのは良い選択で
@import url('http://fonts.googleapis.com/css?family=Lato:300'); @import url('http://weloveiconfonts.com/api/?family=entypo'); * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #ddd; } .content { padding: 30px; font: 300 40px Lato, sans-serif; text-align: center; color: #999; background: #eee; } .footer { padding: 20px 0; text-align: center; } .social { display: inline-bl
投稿日：2014年8月8日 ソフトウェア：- このチュートリアルではプロアマ問わず使える10個の最新無料CSSツールを紹介します。 Step1 ： はじめに Step2 ： CSSの主なメリット Step3 ： 無料のCSSツール10個 Step4 ： 関連記事 CSSはずいぶん前からウェブデザインに必要不可欠な存在になっています。 CSSがここ最近すっかりウェブの標準技術になっているということは、どのウェブデザイナーも認めることでしょう。 ウェブデザイナーでない人なら、CSSとは何か、なぜそんなに利用されているのか、と疑問に思うかもしれません。 ウィキペディアによると、CSSはマークアップ言語（HTMLなど）で書かれた文書の表示を指定するために使うスタイルシート言語です。 このウェブデザインツールにより、時間やお金をかけることなく、サイトへの訪問者の体験を向上させることができるように
投稿日：2014年7月17日 ソフトウェア：- このチュートリアルでは白黒のウェブデザインについて紹介します。 Step1 ： はじめに Step2 ： 白黒はパワフルでどんなアイデンティティでも描写することができる Step3 ： 完璧な色彩設計としての白と黒 Step4 ： 白と黒-完璧なコントラスト Step5 ： 清潔さとシンプルさを求めて白黒を使う Step6 ： 白黒は目に優しい Step7 ： テンプレート集 創造力により、物事はしばしば形を変え、より複雑でより良いものに生まれ変わります。 時には古いデザインからインスピレーションを受け、徐々に発展して行く場合もあります。 ウェブデザインやテンプレートについても同様の進化の過程を辿ってきました。 白黒のウェブデザインという概念は過去のもので、ウェブ開発者が現在使用している印象的で多様な色彩に比べると、白黒はほとんど誰も考慮
投稿日：2014年6月27日 このチュートリアルでは、女性向けのウェブサイトをデザインする方法をご紹介します。 Step1 ： はじめに Step2 ： どうすれば女性に焦点を合わせたウェブサイトを構築できるか 女性の色やデザインの見方というのは男性とは異なります。 男性は通常、家のインテリアの色の調和については女性に任せます。 また、男性は女性の方が色の組み合わせのセンスがあることを知っていて、自分の服の購入すら女性に任せたりします。 男性は買い物に同行させてもあまり役に立ちません。 なぜなら、正常な視力があっても、色の微妙な違いを必死になって区別しようとするからですが、特に黄色、緑、青において顕著です。 これはユニセックスなデザインのウェブサイトを構築する際にも言えることです。 尖った角を使わない 実質的に現在の全てのウェブサイトはグリッドスタイルが使われています。 これはグリッドを使
投稿日：2014年6月20日 ソフトウェア：- このチュートリアルでは3つのステップでレスポンシブデザインを作成する方法について紹介します。 Step1 ： はじめに Step2 ： 失敗その1 - モバイルユーザーのことを考えていない Step3 ： 失敗その2 - 面倒なナビゲーション Step4 ： 失敗その3 - 表示に時間がかかり過ぎる Step5 ： 最後に 会社のウェブサイトは多くのことを物語ります。 良いウェブサイトは、閲覧者にとってこのサイトが重要であるという信頼を作り、何度も訪問したり取引をしようと促します。 一方で、悪いウェブサイトは、「戻る」ボタンを押して閲覧者が帰ってしまいます。 スタンフォード大学が行ったウェブの信頼性調査によると、75％がウェブサイトを見て会社の信頼性を判断するということです。 ウェブを調べると、悪いウェブデザインの例はたくさん見つかります
投稿日：2014年6月12日 このチュートリアルでは、ウェブサイトの料理系ロゴテンプレートをご紹介します。 Step1 ： はじめに Step2 ： 料理系ロゴテンプレート集 下に挙げた料理系ロゴテンプレートを見れば、デザインのインスピレーションが刺激されるでしょう。 ロゴはウェブサイトやビジネスで重要な意味を持ちます。 ロゴは商品の質やストーリーさえも表します。 ですので、ロゴを選ぶときは慎重に行いましょう。 これらのテンプレートが気に入りましたら、Graphicriverもぜひご覧ください。 料理とハートを組み合わせたロゴ イチゴのロゴテンプレート ハートの中にフォークとスプーン フォークを使ったロゴ 料理と街のロゴテンプレート シーフードのロゴテンプレート 生チョコレートのロゴテンプレート コーヒーハウスのロゴテンプレート ニワトリシェフのロゴテンプレート イチゴのロゴ 家での食事を
投稿日：2014年6月5日 このチュートリアルではCSSスニペットについて紹介します。 Step1 ： はじめに Step2 ： HTML5やCSSの本をアマゾンで買う Step3 ： クリアフィックス Step4 ： メディアクエリ Step5 ： CSSリセット Step6 ： 最後に コードスニペットは美しいです。 コードスニペットとは、とてもシンプルで再利用可能な一連のコードのことです。 これをいつでも自分のコードの好きなところで使えます。 これらのコードの断片は、プログラマーやウェブデザイナーの間で共有され、誰もが抱える問題を素早く解決してくれます。 ・HTML and CSS: Visual QuickStart Guide ・Programming in HTML5 with JavaScript and CSS3 ・CSS Cookbook ・CSS in Easy Ste
Home ＞ ウェブデザイン基礎講座 ＞ ウェブデザインにおけるパララックススクロール：パララックスを使ったウェブサイト20選 ウェブデザインにおけるパララックススクロール：パララックスを使ったウェブサイト20選 投稿日：2014年5月30日 このチュートリアルでは、パララックスを使ったウェブサイトをご紹介します。 Step1 ： はじめに Step2 ： パララックス効果を作るためのビデオチュートリアル Step3 ： パララックスを使ったウェブサイト パララックススクロールが主流になっています。 HTML5とCSS3のような新しいテクノロジーがウェブデザイナーにとって新しい可能性の扉を開きます。 これらの新しい機能と自分の想像力を駆使して、ウェブデザインアートの魅力的で注目を集める作品、夢に見たウェブサイトを創造できるようになりました。 関連記事： パララックススクロールをウェブサイト
Joomlaテンプレート：ファッションガイド PrestaShopテーマ：スイーツショップ ZenCartテンプレート：トラベルショップ WordPressテーマ：コンサルティング WordPressテーマ：フォトギャラリー WordPressテーマ：ファンシーレストラン VirtueMartテンプレート：フラワーショップ ZenCartテンプレート：サマーファッション レスポンシブ PrestaShopテーマ：素材屋 レスポンシブ PrestaShopテーマ：自転車ショップ
投稿日：2014年5月16日 ソフトウェア： このチュートリアルでは、写真をモノクロにするベストな方法について紹介します。 Step1 ： はじめに Step2 ： 写真をモノクロに変えるときに、やってはいけない方法 Step3 ： 画像をモノクロにするもっともよい方法 もし写真の加工に興味があるなら、写真をモノクロに変え、雰囲気のあるものにしたり迫力のあるものにしたいと思う日が来ると思います。 実際にする作業はボタンをぽちぽち押すくらい簡単なものですが、Photoshopで写真をモノクロにする一番よい方法は何か。 この記事では、よく使われるテクニックを紹介し、そのテクニックで写真がどう変わるかを見ていきたいと思います。 まずは、写真をモノクロにしたいと思った人がよくやってしまう間違いを見ていきましょう。 彩度を下げる 「イメージ」＞「色調補正」＞「彩度を下げる」とするか、色相・彩度オ
投稿日：2014年4月11日 ソフトウェア：- このチュートリアルではレスポンシブデザインについて知っておくべきことについて紹介します。 Step1 ： はじめに Step2 ： レスポンシブデザインとは何か Step3 ： レスポンシブデザインはモバイルフレンドリーとは異る Step4 ： フルードグリッドとの親密な関係 Step5 ： 画像や書体もレスポンシブに Step6 ： フレームワークでもっと簡単に Step7 ： Eメールもレスポンシブに レスポンシブデザインは特に新しいものではありません。 レスポンシブデザインの歴史は、Ethan Marcotte がA List Apartの記事の中でレスポンシブデザインという言葉を使った2010年に遡りますが、このわずか3年少しの間にウェブデザイナーの仕事を完全に変えてしまったということは疑いも無い事実です。 レスポンシブＷｅｂデザ
Home ＞ フォトショップ講座 ＞ Photoshopで小型カメラに映る画面のような効果を作る方法 Photoshopで小型カメラに映る画面のような効果を作る方法 投稿日：2014年4月4日 ソフトウェア： このチュートリアルでは、小型カメラに映る画面のような効果を作る方法について紹介します。 Step1 ： はじめに Step2 ： 色調補正 Step3 ： グラデーション Step4 ： ライン作成 Step5 ： カラー調整 Step6 ： 完成
投稿日：2014年3月27日 ソフトウェア： このチュートリアルでは、カスタムブラシとレイヤーマスクを使って簡単に美しい水彩画を描く方法について紹介します。 Step1 ： 背景を作成 Step2 ： 水彩画像を作成 Step3 ： カラスを加える Step4 ： 完成 Photoshopドキュメントを作成します。 サイズは1200ピクセル×800ピクセルです。 レイヤーパネルの調整レイヤーボタンを押してから「グラデーション」を選択します。 「グラデーションで塗りつぶし」というボックスが表示されますので、グラデーションボックスをクリックして「ダークグレーから透明へ」のグラデーションを作ります。 スタイルを円形にして、比率を150％にしたら、「OK」をクリックします。 レイヤーの不透明度を30％にします。 レイヤーパネルの「新規レイヤー」ボタンを2回クリックして2つのレイヤーを追加します
投稿日：2014年2月28日 ソフトウェア： このチュートリアルでは、画像に滑らかでソフトな輝きをつけて、写真を鮮やかにする方法をご紹介します。 Step1 ： はじめに Step2 ： ぼかし Step3 ： オーバーレイ Step4 ： 完成
投稿日：2014年2月20日 ソフトウェア： このチュートリアルでは、窓についた雨粒を作成する方法をご紹介します。 Step1 ： はじめに Step2 ： 青色を8色用意 Step3 ： グラデーションメッシュ Step4 ： クリスマスツリーを作成 Step5 ： 背景のあかりをリアルに Step6 ： 雨粒を作成 Step7 ： 完成 「あ、雨だ。やんでくれないかなぁ。出かけたいのに。。。」 雨の日はどうやって過ごしますか？ 布団にくるまって好きな本を読みますか？ それとも窓から外の雨をいつまでも眺めていますか？ 正直言うと、私は前者を選びますね。 雨の日と言えば、ここからは雨粒や窓のくもりをベクター画像で描く方法を書いていこうと思います。 心配は無用です。 とてもシンプルで簡単にできます。用意はいいですか？ それでははじめましょう。
タイプ：XMLとフラッシュのサイト 作者：Cowboy 使用するソースファイル：.swf / .fla / .xml 必要なソフトウェア：Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3 テンプレートZIPパッケージを解凍するソフトウェア：WinZip 9以上 （Windows） / Stuffit Expander 10以上 （Mac） 製品説明：HTMLバージョンは含まれていません 幅：1600px タイプ：XMLとフラッシュのサイト 作者：Oldman 使用するソースファイル：.swf / .psd / .fla / .xml 必要なソフトウェア：Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3 テンプレートZIPパッケージを解凍する
次のページ
このページを最初にブックマークしてみませんか？
『Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
