カテゴリー別アーカイブ: Web design

eye_sns_icon

各種サービスロゴの利用ガイドラインまとめ

SNSをはじめとする各種サービスのロゴには色や大きさの指定をはじめ、権利や利用条件があります。ウェブサイトにバナーやボタンを自作で掲載する際の参考として、利用ガイドラインをリンクにまとめました。
※読み込みに時間がかかる場合がありますが、ご了承ください。

Twitterのブランドガイドライン

https://about.twitter.com/ja/press/brand-assets

https://about.twitter.com/ja/press/brand-assets

Facebook Brand Resources

https://www.facebookbrand.com/

https://www.facebookbrand.com/

Google+ ブランディングに関するガイドライン

https://developers.google.com/+/branding-guidelines?hl=ja

https://developers.google.com/+/branding-guidelines?hl=ja

LINE ロゴの利用について

http://line.me/logo/ja

http://line.me/logo/ja

Tumblr ロゴを自由に使おう

http://www.tumblr.com/logo

http://www.tumblr.com/logo

WordPress › Logos and Graphics

https://wordpress.org/about/logos/

https://wordpress.org/about/logos/

ブランドガイドライン | 法人向け Pinterest

http://ja.business.pinterest.com/brand-guidelines/

http://ja.business.pinterest.com/brand-guidelines/

Evernoteトレードマークの利用に関して

http://evernote.com/intl/jp/trademark/

http://evernote.com/intl/jp/trademark/

このエントリーをはてなブックマークに追加
LINEで送る

eye_webdesign_site

WEBデザインまとめサイトの一覧

WEBデザインのデータベースやリンク集は数多くありますが、カテゴリ別や配色別などの分類やレスポンシブに特化したものなどそれぞれの特徴があるため、主なサイトをコメント付きでまとめました

straightline™_bookmark

http://bm.straightline.jp/

http://bm.straightline.jp/

登録すると my bookmarkmy favorites などの機能が使えるだけでなく、カラーやカテゴリのほかにレイアウトでの抽出もできる、優れモノのサイト。

I/O 3000

http://io3000.com/

http://io3000.com/

カラー,カテゴリのほかにタグでタイプやコンテンツ別での抽出もできる便利なサイト。

S5-Style

http://bm.s5-style.com

http://bm.s5-style.com

カテゴリーやタグのほかにAND検索とOR検索も可能。お気に入りサイトの一時的な保存にも対応。

Web Design Clip

http://www.webdesignclip.com/

http://www.webdesignclip.com/

カラー,カテゴリーのほか、テクノロジーやレイアウト別に閲覧可。評価を付けることもできます。

bookma!

http://bookma.org/

http://bookma.org/

カラー,テイスト,カテゴリーのほか、新着順/ツイート順/いいね!順などからも閲覧可。審査がありますが、サイトの投稿も可能です。

Design Link Database

http://www.designlinkdatabase.net/

http://www.designlinkdatabase.net/

カラー,コンテンツ,テイスト,テクノロジーのほかランキング別で閲覧可。サイト評など詳細情報もあり、参考になります。

イケサイ

http://www.ikesai.com/

http://www.ikesai.com/

カテゴリー,カラー別に分類。業種カテゴリーが豊富なので、業種別にサイトデザインを見ることができます。

Webデザインの見本帳

http://www.web-mihon.com/

http://www.web-mihon.com/

印象,カラー,ジャンル別に分類。サイトのサムネールとタイトル+概要が掲載されています。サイトの登録も可。

ズロック

http://www.zzrock.net/

http://www.zzrock.net/

業種,レイアウト,カラー/イメージ,種類別に閲覧可。サムネールの大きさを S/M/L と切り替えることができます。

WEB de DB

http://www.webdedb.com/

http://www.webdedb.com/

カテゴリー,カラー別に分類。企業をはじめ、ショッピングやファッション系のサイトが豊富です。

Responsive Web Design JP

http://responsive-jp.com/

http://responsive-jp.com/

カテゴリー,カラー,テクニック,タイプ別に分類。レスポンシブWebデザインに特化されており、参考になります。

4db

http://4db.cc/

http://4db.cc/

地域,業種別に分類。地域別のカテゴライズが新鮮で、集められたサイトも粒ぞろいです。

ブブンデザインアーカイブ

http://bubundesignarchive.jp/

http://bubundesignarchive.jp/

デザイン性に優れたWebサイトのパーツをアーカイブしているまとめサイト。分類もヘッダ,デザイン/装飾系,機能,コンバージョン,フッターと部分デザインに特化しており、デザインのネタとして活用したいサイトです。

このエントリーをはてなブックマークに追加
LINEで送る

画面サイズ一覧

画面サイズ一覧

インターネット初期の頃は画面サイズが 640×480800×600 などが標準サイズでしたが、今では PC,タブレット,スマートフォンはもちろん、家庭用ゲーム機やテレビからもインターネットを見ることができる一方で、配置する画像サイズに困ることも少なくありません。

…というわけで、ウェブサイトの背景画像や壁紙などを作成する際の参考に画面サイズ一覧をまとめてみました。

※ ここでは主な規格のみ掲載しています。機種ごとのサイズには対応していませんのでご了承ください。

画面サイズ一覧
サイズ 通称 比率 備考
320×240 QVGA 4:3 PDAや携帯電話などで採用
400×240 WQVGA 3:2 QVGAの幅を広げた規格。PDAや携帯電話などで採用
640×480 VGA 4:3 PC用グラフィックシステムの標準
800×480 WVGA 15:9 VGAの幅を広げた規格。PDAや携帯電話などで採用
800×600 SVGA 4:3 256色、65536色、16777216色
854×480 FWVGA 16:9 WVGAの幅を広げた規格。PDAや携帯電話などで採用
1024×768 XGA 4:3 iPadが採用
1280×800
1280×768
WXGA 15:9
16:10
1280×960 Quad-VGA 4:3 VGA(640×480)の4倍の画素数・面積(相似比は2倍)
1280×1024 SXGA 5:4
1400×1050 SXGA+ 4:3 SXGA(1280×1024)を縦横にわずかに広げた解像度
1680×1050 WSXGA+ 16:10
1600×1200 UXGA 4:3
1920×1080 FHD 16:9 フルHD
1920×1200 WUXGA (Wide-UXGA) 16:10 ノートパソコンの最大ピクセル数
2048×1536 XGA (Quad-XGA) 4:3 XGA(1024×768)の4倍の画素数・面積(相似比は2倍)
2048×1536 Retinaディスプレイ 4:3 iPad Air … 264ppi
iPad mini … 326ppi
2560×1600 WQXGA (Wide-QXGA) 16:10 WXGA(1280×800)の4倍の画素数・面積(相似比は2倍)
2560×2048 QSXGA (Quad-Super XGA) 5:4 SXGA(1280×1024)の4倍(Quad)の画素数・面積(相似比は2倍)
3200×2400 QUXGA (Quad-Ultra-XGA) 16:10 UXGA(1600×1200)の4倍の画素数・面積(相似比は2倍)
3840×2160 QHD (Quadruple/Quarter High Definition) 16:10 フルHD(1920×1080)の面積比4倍(3840×2160、相似比は2倍)または1/4(960×540、同1/2)の解像度
3840×2400 QWUXGA (Quad-WUXGA) 16:10 QUXGA(3200×2400)の横幅を広げた解像度

最近のモニターであれば、16:10 で画像を作成すれば対応しますが、古いモニターに対応する場合は4:3のサイズで作成するのが望ましいでしょう。また、レスポンシブで縦・横どちらの表示にも対応する場合は 1:1 で背景画像を作成し、保存時の画像圧縮などで適切なサイズに書き出すようにしましょう。

※ iPad Air(264ppi), iPad mini (326ppi)をはじめ、高解像度の画面に最適な画像を用意する場合、2048×2048 の画像を別に用意し、jQuery でPCとスマホで画像を切替える方法などを使います。

このエントリーをはてなブックマークに追加
LINEで送る

Lightbox

Lightbox を使った画像表示

Sleeping egg では主に写真を掲載していくため、先に作成した fullPage.js ベースのティザーサイトで大きいイメージを表示するのに最適な Lightbox をとりあえず追加してみました。
※ ティザーサイトの作り方はこちら »

1. 公式サイトから Lightbox をダウンロード

Lightbox のダウンロード

Lightbox のダウンロード

トップページを下にスクロールすると、Lightbox v2.6 のリンクがあるので、そこからダウンロードします。

2. lightbox2.6.zip を解凍

lightbox2.6.zip の解凍ファイル一覧

lightbox2.6.zip の解凍ファイル一覧

解凍されたファイルには css, img, js の各ファイルと index.html が入っています。

3. 解凍した lightbox のフォルダを fullPage.js で作成したサイトに移動

fullPage サイトに lightbox フォルダを移動

fullPage サイトに lightbox フォルダを移動

Lightbox のファイルをまとめるために lightbox フォルダをそのまま移動していますが、外部リンク先を変更しない場合は img, js, css の各フォルダを example2.html と同じ階層に保存してください。

4. htmlファイルの<head>に JavaScript を追加

&lt;script type=&quot;text/javascript&quot; src=&quot;lightbox/js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;

既にHTML内に jquery が入っているため、jquery-1.10.2.min.js は外しておきます。また、lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

5. htmlファイルの <head> に CSS を追加

		&lt;link href=&quot;lightbox/css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;

lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

6. 画像リンクに Lightbox を設定

&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-1.&quot; href=&quot;lightbox/img/demopage/画像-1.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;
&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-2.&quot; href=&quot;lightbox/img/demopage/画像-2.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-2.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;

Lightboxを有効にするには、画像の a 要素に data-lightbox 属性を追加します。data-lightbox の値が単独の時は1枚画像に対しての効果、複数の画像に共通した data-lightbox 値を設定すると、共通のグループ画像として認識されます。また、キャプションを表示する場合は title 属性を設定します。

7. Lightbox の動作確認

通常の画像表示

通常の画像表示

↓画像をクリック↓

Lightbox 使用時の画像表示

Lightbox 使用時の画像表示

画像がモーダル・ダイアログで拡大表示されたら、Lightbox は正常に動作しています。

今回はサンプルをほぼそのまま使用していますが、ボタンやモーダル・ダイアログ時の背景色をはじめ、アレンジした使い方もやってみたいと思います。

このエントリーをはてなブックマークに追加
LINEで送る

fullPage.js

fullPage.js を使ったウェブデザイン

fullPage.js を使って、Sleeping egg のティザーサイトを作成した際の覚書です。

Sleeping egg ティザーサイト

Sleeping egg ティザーサイト

fullPage.js のサンプルページに、固定の背景画像と画像の拡大表示用 LightBox のjQueryプラグイン を追加しました。

1. fullPage.js から、fullPage.js-master.zip をダウンロードし、解凍

fullPage.js から fullPage.js-master.zip をダウンロード

fullPage.js から fullPage.js-master.zip をダウンロード

fullPage.js ページ中央の Downroad ボタンからファイルをダウンロードします。

2. example.html と example.css を複製 → ファイル名を変更

fullPage.js-master.zip の解凍ファイル一覧

fullPage.js-master.zip の解凍ファイル一覧

解凍したファイルの HTMLCSS ファイルを複製し、ファイル名を修正します。ここではとりあえず example2 で保存しました。

3. HTML内の title, author, description を修正

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
fullPage.js One Page Scroll Sites
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
<meta name="Resource-type" content="Document" />

	<link href="jquery.fullPage.css" rel="stylesheet" type="text/css" />
	<link href="example2.css" rel="stylesheet" type="text/css" />

CSS のリンクが切れないように、ファイル名を修正します。ついでにタイトルやキーワードなども変更しますが、後からの修正でも問題ありません。

4. 背景に配置する画像を作成

背景用画像

マルチデバイス対応の背景用画像は正方形で作成

マルチデバイス対応のため、サイズは 1280×1280px にします。
※ サイズは正方形であればOKですが、メインとなるデバイスやファイルサイズに応じて調整してください。画像のファイルサイズは1MB以内が望ましいです。
※ サイズについては 画面サイズ一覧 を参照ください。

5. cssファイルの Custom CSS内 に 下のコードを追記

html {
 background: url('_images/back.jpg') no-repeat center; /* 背景画像をhtml要素に表示 */
 background-size: cover; /* 背景画像をフルスクリーン表示 */
}

html の CSS は body タグ近くに追加していますが、特に強制ではありません。

6. htmlファイルの javascript内 slidesColor のカラーを削除

<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
		$.fn.fullpage({
			slidesColor: ['', '', '', '', ''],
			anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
			menu: '#menu'
			});

		$('#showExamples').click(function(e){
			e.stopPropagation();
			$('#examplesList').toggle();
		});

		$('html').click(function(){
			$('#examplesList').hide();
		});
	});
// ]]></script>

4行目にある slidesColor の色コードや色名を削除します。そのまま流用したい場合は消さずにおきましょう。

背景画像の配置と slidesColor のカラー削除

背景画像の配置と slidesColor のカラー削除

これで、背景画像が表示されました。
ついでに section0 内のテキストも修正すると、このようなイメージになります。

7. section0に背景を被せる

section0に背景のフルカラー画像を被せるため、cssに下のコードを追記します。

#section0{
	width:100%;
	height:100%;
	background-image:url(_images/back_color.jpg);
	background-position: 50% 50%;
	background-size: cover; /* 背景画像をフルスクリーン表示 */
}
トップ用固定画像の配置

トップ用固定画像の配置

これで、背景画像の上に section0 のスライド画像が表示されました。

8.右上のリボンバナーを差し替える

右上にある fullPage.js のリボン風リンクバナーを自サイト用に差し替えます。

Web2.0風のリボン画像ジェネレーター

Web2.0風のリボン画像ジェネレーター

Quickribbon の画像ジェネレータを使うと簡単に Web2.0風のリボン画像が作成できます。書き出した画像と元画像を差し替え、リンク先を Tumblrサイト に変更しました。

9.フォントの変更

Google Fonts

Google Fonts

通常ではパソコンにインストールされているフォントでブラウザ上の文字を表示しますが Webフォントを使用すると、任意のフォントで表示することができるようになります…というわけで、Google Fonts から商用フリーの Webフォント を使ってタイトルらしいお洒落な文字にするため、HTML と CSS ファイルにそれぞれ下記コードを追記します。

HTML<head>内に追加)

<link href="http://fonts.googleapis.com/css?family=フォント名" rel="stylesheet" type="text/css" />

CSSh1, h2 ,p タグの font-famiry に追加)

h1{
font-family: フォント名, Verdana, Geneva, sans-serif;
font-size: 8em;
font-weight: normal;
color: #FFF;
}
h2{
font-family: フォント名, Verdana, Geneva, sans-serif;
font-size: 7em;
font-weight: normal;
color: #FFF;
}
p{
font-family: フォント名,Verdana, Geneva, sans-serif;
font-size: 2em;
}
Sleeping egg ティザーサイト完成

Sleeping egg ティザーサイト完成

これで、オリジナルサイトらしくなりました。

あとはヘッダーのナビケーションや他ページの内容などもこれまでの要領で変更していけば、ティザーサイトの完成です。

※ LightBox の追加については 次ページ にて説明します。

fullPage.js のスクリプトを使えば、アレンジ次第でスタイリッシュなレスポンシブサイトが簡単に作成できます。まずは見本の差し替えからトライしてみましょう。
このエントリーをはてなブックマークに追加
LINEで送る