DesignWalker » テンプレート

HTML5で構築されたテンプレート・フレームワークいろいろ

admin — Mon, 07 Jun 2010 21:47:54 +0000

現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今後、HTML5が普及してしまえば、Flashは必要なくなる！？なんて意見もあるほどです。

ウェブデザインに関わる方々は、今のうちからちょっとした概要だけでも見ておいて損は無いのではないでしょうか。

というわけで、今回はHTML5で構築されているテンプレートやフレームワークなどをまとめてみました。

HTML5でコーディングされたサイトを見て、実際にどのように構築されているのか勉強してみてくださいね。

Coding A HTML 5 Layout From Scratch

おなじみSmashing Magazineさんから提供されている、スクラッチからコーディングするHTML5のチュートリアル。各ブラウザへの配慮などかなり詳しく解説されています。

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML5とCSS3で構成されたテンプレートを構築するチュートリアル。CSSもしっかり解説してくれています。

52Framework – first ever html5 and css3 framework

52Frameworkは、HTML5とCSS3で構成されたフレームワーク。このファイルをもとにデザインを組み込んでもよさげですね。

Less Framework

こちらもHTML5で構築されたCSSフレームワーク。こちらのフレームワークもシンプルで使いやすそう。

Free HTML5 Templates | Bringing modern web standards to everyone

HTML5とCSS3のテンプレートをたくさん集めて掲載してくれているまとめサイト。ブラウザでそのまま確認できるデモとファイルのダウンロードが用意されています。

Design & Code a Cool iPhone App Website in HTML5

こちらはPhotoshopのデザイン作業からHTML5のコーディング作業までを紹介してくれているチュートリアル。初心者の方にはとても参考になるのではないでしょうか。

Build a HTML5/CSS3 Website Layout Without Images

画像を一切使わずに、HTML5とCSS3で構築されたレイアウトサンプル。こちらは、ファイルもまとめてダウンロードできるので、興味のある方はダウンロードして、コードの中身を研究してみてくださいね。

HTML5 Starter Pack – a sick freebie

HTML5のスターターパックとして公開されています。こちらのファイルをもとにデザインを進めてみてください。

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

とっても洗練されたデザインのHTML5のファイルを無料でダウンロードできます。

Coding a CSS3 & HTML5 One-Page Website Template

メニューをクリックするとコンテンツまでスライドしてくれるエフェクトも備えたHTML5とCSS3のテンプレートです。

Gotta’ love HTML5 & CSS3

HTML5とCSS3で構築されたギャラリーページのテンプレートです。画像にマウスオーバーすると半透明のレイヤーで画像の説明文が表示されます。

A free HTML5 and CSS3 theme

ちょっぴりポップなHTML5とCSS3のテンプレート。こちらもファイルをまとめてダウンロードできます。

Free HTML5 template | Web design London

2カラムと3カラムバージョンの2種類のテンプレートが公開されています。

OWMX 1 – Free 2 Column HTML5 & CSS3 Website Template

一通りの要素を並べてくれているHTML5とCSS3のテンプレート。シンプルで、使いやすそうです。

HTML 5 Templates, HTML 5 canvas, HTML5 video, HTML 5 XHTML, HTML 5 tag

シンプルなデザインで、テンプレートが公開されています。

グリッドデザインに使えるツールいろいろ

admin — Tue, 11 May 2010 22:06:25 +0000

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか？

ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ！

今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。

Grid Style In Modern Web Design: Showcase and Resources

美しいグリッドデザインのサイトがたくさん集められています。

Grid Based Designs | inspiration gallery

グリッドデザインのウェブサイトを集めたインスピレーションサイトです。

960 Grid System

PhotoshopやIllustrator、Fireworksなどなど様々なファイル形式に対応したテンプレートが公開されています。サイトをデザインし始める時にはまずはこちらのテンプレートからはじめてみてはいかがでしょうか？

BlueTrip CSS Framework

グリッドデザインに対応したCSSフレームワーク。テンプレートとあわせてこちらのフレームワークも使えそう。

Blueprint: A CSS Framework

こちらもCSSのフレームワーク。

gridlayouts.com

このスクリプトを入れると、キーボードでctrl+shift+gを押すと設定したグリッドのバーが表示されます。

#grid

こちらのスクリプトはキーボードのgでグリッドが表示されます。

jQuery Masonry

このスクリプトを使えば、cssのFloatでガタガタにならず、綺麗にグリッドで並べてくれます。

Fluid 960 Grid System

jQueryとMoo Toolsバージョンが用意されているグリッドシステム。リキッドデザインにも対応しています。

Fluid Grid System

こちらもリキッドデザインに対応したグリッドシステムです。

Design a Clean Web Layout with the 960 Grid | Tutorial9

先にご紹介した960 Grid Systemを使った、デザインレイアウトのチュートリアル。グリッドデザインを始める人にはとても参考になるチュートリアルです。

nP: Grid Generator – build your own custom css grid

自分で好きなように数値を設定してpng形式でダウンロードできるグリッドジェネレータ

ZURB CSS Grid Builder

こちらもカラム数、カラムの幅、隙間の幅を設定すれば、CSSが書き出されます。

Variable Grid System

こちらもカラム数、幅などを設定してCSSがダウンロード出来ます。

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approach

こちらは数値を入力するのではなく、バーをスライドさせるタイプです。

Gridmaker v3

数値を変えればリアルタイムでグリッドが変更されます。

Grid Calculator

こちらもバーをスライドさせるだけで、グリッドを変更させることができるツールです。

Grid Designer

ボタンをクリックしてカラムや横幅などが調整できます。

無料で使えるWordPressテーマ 2009年厳選100+

admin — Mon, 14 Dec 2009 22:46:34 +0000

え！？こんなにレベルの高いテーマが無料で使えるの！？と思ってしまうほど、年々レベルが上がっていく無料で使えるWordPressテーマ。

2009年、総まとめシリーズです。今回は無料で使えるWordPressのテーマを100種類とおもったら、少し多めに集めてしまいました。

ダウンロードしてそのまま使用するだけでなく、デザインのアイデアやコーディングの参考などにも使えそうですね。

Imagination

Corporate Life

Phloggin

FreeStyle v.1

KeKo

Dimaggio

Furvious

VibranTech

Cleanpress

New York

Softy wordpress theme

Moi Magazine

FashionPress

Celadon

Modern Style

Channel

HexaMag

Cashzone

Creative by Nature

BrownMag

Simplista

Blue Rooster

Fotofolio

ElegantRed

Splendour

Braw

Strownes

Magnolia

Layer Press

iBusiness

Work-a-holic

Livien

Linquist

Free Podcasting, Video and Photography WordPress Theme

NEWSPRESS

Meta-Morphosis

Spexel WordPress Theme

FXMag :: Premium Magazine WP

Zeoal:Advanced WordPress Theme

Foodiary Premium Magazine

Sigyn SM

Money Theme

Tipz Theme

Glassical

Fresh Mortar

Pork and Beans

Berita Business WordPress Theme

SimpleCart(js)

monkeypr

Paper Wall

CoolRetro

Cypher v.2

Obscure

PolaroidPress

BlueBubble

Life Collage

Magiting

Mystique

WP Revolution-X

WP NewsMag

The Original Premium News

AppCloud

The Web News Theme

MIMBO

Hybrid News

Zoxengen

Magazeen

ART-MAGAZINE

SohoMag

Elegant Grunge

BlogStarter Theme

WP Themedvista

Zeke 1.0

MagZine

Black Red wp theme

WP Premium Theme

Fontella

Annexation

Free Magazine-Styled WordPress Theme

GenM 1

Dark Classic theme

Imprezz

Compositio

Selecta

Mainstream

deStyle

Holiday WordPress

Vintage and Blues

Gallery WordPress Theme

City Dreams WordPress Theme

IsoTherm News Magazine WordPress Theme

The Unstandard

HELLBISCUIT

Bueno

PhotoMadness Theme

The MMOZINE Theme

AutoFocus

SchemerMag Theme

Changing Room

Irresistible

FREEmium WP Theme Released

OneRoom

WP Fholio

Skyye News Theme

Vector Flower

Nami WordPress Theme

BlogTheme

TurnOut Mag Theme

Old School

MegaNews Theme

Versatility Lite

WordPress Grid Focus

ビジネスサイトに使えるレイアウトのチュートリアルいっぱい

admin — Tue, 01 Dec 2009 06:27:15 +0000

最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね。

これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか？

今回は、そんなウェブデザイン初心者の方でも、つかえそうなビジネスサイトのレイアウト系のチュートリアルをいっぱい集めてみました。

いくつかのサイトではPhotoshopのファイルがダウンロードできるサイトもありますので、とても参考になるのではないでしょうか？

まずは、気に入ったデザインを真似するところからはじめて見ましょう！

Create a Clean and Effective Product Layout

Appleのウェブサイトっぽいシンプルで洗練されたレイアウトのチュートリアルです。

Create a Clean and Colorful Web Layout in Photoshop

背景のグラデーションが印象的なチュートリアル

Design a Beautiful Website From Scratch

細部にまでこだわって作られている美しいウェブサイトのチュートリアル

Design a Clean and Colorful Portfolio in Photoshop

ブルーの背景も微妙にグラデーションを加える事でベタにならないですね。

Create a Professional Portfolio Design in 17 Easy Steps

破れた紙を敷いたような美しいレイアウト

Business Layout #2

上から見下ろしたようなバードビューのレイアウト。

Business Layout #3

やさしい色使いが美しいチュートリアルです。

Sleek and modern portfolio layout

シンプルですが力強い印象のレイアウトですね。

Design a Premium Theme Marketplace Layout Using Photoshop

グリーンとブラウンと配色が美しいレイアウトのチュートリアル

Create a Business PSD Layout in less than 10 minutes*

オレンジの帯で全体を引き締めていますね。

Modern Web 2.0 Web Layout

こちらはブルーのライン。

Clean Business Layout Tutorial

角丸のレイアウトの参考に

Create a Clean Business Web Template Design in Photoshop

とてもシンプルなレイアウトですね。これをベースに手を加えていってもかっこいいウェブサイトが出来上がりそう。

Business Layout #5 Tutorial

背景に大胆な色味をつけるパターンもありですね。

Computer Store Web Layout

ラップトップの画像を枠から飛び出させる事で動きが出ています。

Create a professional dark web hosting layout

シンプルながら、微妙に光のあたり具合を調整していたりして細かいところまでこだわって作られている感じ。

Create a communication layout in Photoshop

ボタンの背景などに単純なグラデーションだけでなくテクスチャーを加える事でさらに質感がアップしていますね。

Corporate Business Layout

トップの写真を変えるだけで大きく印象が変わりそう。シンプルな作りなのでいろいろと使い回しがききそうですね。

Business Layout #4

こちらも角丸レイアウトの参考にできそうなレイアウトですね。

Design Blue Corporate Website in Photoshop

ブルーですっきりと清潔な印象のデザインですね。

Softblue Template Tutorial

アイコンを使って分かりやすいサイトに仕上がりそうですね。

Make a nice corporate website for a product

文字だけでも結構インパクトを与えられそう。

Design a Clean Corporate Website With Illustrator

色味やレイアウトを参考に、もうひと手間加えれればかっこいいサイトになりそう。

Professional Web Layout for Business Solutions

サイドバーのラインが突き抜けてインパクトアップですね。

Design a Green Corporate Layout in Photoshop

グリーンの背景もなかなか使えそう。

How to Make a Green & Sleek Web Layout in Photoshop

ふんわりとした優しい感じのウェブサイトに仕上がりそう。

Photoshop tutorial to design a clean business layout

力強いインパクトのあるウェブサイトですね。

Web Design Layout #9

ヘッダーにテクスチャを使用したレイアウトの例。

Product Sales Page

ブルーで清潔感アップしたレイアウト。

Create a Clean Modern Website Design in Photoshop

とってもシンプルなレイアウトですね。

Corporate WordPress Style Layout

インパクトのある写真があるのなら、このレイアウトは使えそう。

無料で使えるJoomlaテンプレート集まとめ

admin — Tue, 07 Jul 2009 05:36:33 +0000

人気のオープンソースCMS Joomla!を利用されている方も多いのではないでしょうか。

世界的なシェアも非常に高く、クオリティの高いテンプレートやJoomla!をさらにパワーアップさせてくれるExtensionsなどなど、たくさん公開されています。

今回は、無料で使えるJoomla!のテンプレートをまとめてみました。

Best of Joomla!

テンプレートの数も豊富で、とっても見やすくランキングなどの見せ方も、とっても上手なサイトです。お気に入りのテンプレートが必ず見つかるはず。

Joomla Templates Club

テンプレートは豊富で、さらにExtensionsもたくさんまとめられております。

Joomla24.com

2200種類を超えるテンプレートの数と、サムネイルだけでなくプレビューがあるところがとっても便利です。

SiteGround Template Gallery

バージョン1.0と1.5系でカテゴリ分けされたテンプレートサイト。

BoyGJ.COM

Joomlaテンプレートだけでなく、WordPressのテンプレートなども扱っています。

themesBase.com

有料テンプレートサイトですが、無料のテンプレートもたくさん掲載されています。

joomlashack.com

数はそれほど多くはありませんが、とっても見やすいテンプレートサイトです。

RocketTheme

とってもきれいなJoomlaのコミュニティサイトです。無料のテンプレートもいくつか紹介されています。

JoomlaJunkie

テンプレートをダウンロードするには、ユーザー登録が必要です。

joomla templates – IbolDesign

かわいらしいテンプレートが豊富です。

Joomla Show

イタリアの語のJoomlaテンプレートサイトです。

joomlaos.de

ドイツ語のJoomlaテンプレートサイトです。かなりたくさんの数のテンプレートが紹介されています。

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

とってもかっこいいテンプレートや、使えるExtensionsなどが満載。

35 Beautiful Commercial And Free Joomla Templates

商用テンプレートと無料テンプレートともにクオリティの高いテンプレートがまとめられています。

無料で使える2009年カレンダーいろいろ

admin — Wed, 07 Jan 2009 14:15:43 +0000

少し、遅くなってしまいましたが、明けましておめでとうございます。
今年も、デザインウォーカーをどうぞよろしくお願いいたします。

みなさんは、もうカレンダーを買われましたか？意外とカレンダーって買おうと思うとなかなか良いデザインが見つからず、まぁ今回はいいかと思っているうちに年を越してしまい、買わずに時が過ぎてしまうって事無いですか？

今回は、とりあえず、無料ですぐに使える2009年のカレンダーをまとめてみました。

Download Your Free Spoonzilla Desktop Calendar

PDFファイルをダウンロードしてプリント。ラインに沿って切り取ると卓上カレンダーが出来上がります。

Thumb Calendar

ちょっと見づらいですが…裏表このカード一枚で１年分のカレンダーになってます。

2009 Calendar + Wallpaper Pack by `GeorgeHarrison

iPhone、iPodTouchユーザーにはうれしい、壁紙カレンダーです。

Desktop Wallpaper Calendar: January 2009

かわいいものからクールなものまでカレンダー付きの壁紙がまとめられております。

2009 Calendar download

１２種類のクオリティの高いCGの壁紙カレンダーです。

Wallpaper collection: Calendar wallpaer 2009

こちらも１２ヶ月分きれいな写真のデスクトップ用の壁紙カレンダーです。

Various Calendar 2009 Design Inspiration

クールなカレンダーデザインがまとめられております。

2009 calendar in 6 formats by *123freevectors

ベクター形式でさまざまなタイプのカレンダーが公開されています。

Free Printable Calendars

色違いや形式の違う１２種類のカレンダーがPDF形式でダウンロードできます。

Make your own calendar 2009 in PDF

お気に入りの写真を入れて、PDF形式でダウンロードできるカレンダー・ジェネレータ。

PDFCalendar.com

自分で設定してPDF形式でダウンロードできるカレンダー・ジェネレータです。

手軽で使い勝手の良いCompact Calendar 2009 (でぃべろっぱーず・さいど)

Compact Calendarの日本語版です。Excel、PDF形式でダウンロードできます。

カレンダーを無料でダウンロード-パソコンカレンダーサイト

こちらも日本語でいろいろなタイプのカレンダーがPDF形式でダウンロードできます。

Dynamic Templates v2.02: The Next Generation

Mac版、Windows版それぞれ公開されているテンプレート・アプリケーションです。年、月、週、日ごとのテンプレートが入っています。サイズ設定もできるので、手帳のサイズに合わせてプリントすると便利ですね。

2009 calendars – Templates – Microsoft Office Online

Microsoftのサイトにも、WordやExcel形式のカレンダーがたくさんアップされています。

Plain Free Calendar Templates

こちらもオーソドックスなタイプのカレンダーが豊富です。

2009 Calendar template

クールなベクター形式のカレンダー

Calendar 2009 – free download!

Illustrator形式で、ダウンロードできるスタンダードなカレンダー。

Calendario 2009 vettoriale

PDF、EPS、AIなど、さまざまな形式で公開されているイタリア語のカレンダーです。

無料のWordPressテーマ100選

admin — Sat, 20 Dec 2008 13:49:18 +0000

年末のお休みにブログのデザインを変えてみたり、新しくブログを始めたりされる方々も多いのではないでしょうか。

本日は、総まとめシリーズWordPress編です。

無料でダウンロードできるハイクオリティなWordPressのテーマを100個まとめてみました。

とても無料だとは思えないほど、きれいなテンプレートがたくさんあって、どれにしようか迷ってしまいますね。

Color Paper

Notepad Chaos

Nature Gift

japan-style

WP Imagination

Cellar Heat

Absynthe

Vikiworks V5 theme

DarkForest Theme

Deskspace Theme

iphone

CreativeArt Theme

SuperFresh

Desk Mess WordPress Theme

love earth

Infinity

Outdoorsy

Twilight Saga

WildDreams

Fantasy

Floral Day Theme

Crumpled Paper Burn

Deep Blue

Rewire Theme

Revolution-X

Colourise

Fresh Editorial

Royal Oak

Black Magic

WordPress Fun

REDISH

Urban Style Theme

Illacrimo

Elegance

Pixeled

Resurrection

NEW RISE

WP Vista

MysticGrunge Theme

Mahiwaga

Elegance Remix

StudioPress

Dilectio Theme

JET 30

iTheme

Simply Ornate

The Wind Cries Mary

Tomodachi

WordPress Magazine theme

SCRUFFY

WP CODA

FACING

Sten

NIGHT WHIMSY

Agregado

Lady In Green

Summernight WordPress Theme

Dyne

WINTER DELIGHT

Designredux

PerfecTOM

Natural Power

MyWall WordPress Theme

Elegance

Small Magazine theme

Sharpfolio

Balance White

iNove

SpringLoaded

WyntonMagazine

Tigerpress

Vrede

fervens

Our Rights WordPress theme

Typebased

Softpresence Layout

Seabreeze Theme

WordPress Premium

Personal WordPress Theme

Curious

BlueGrey theme

Photorama

Crafty Cart

Snapshot

BizTheme

Monochrome Gallery

PhotoBlogFB

Sp142 theme

Transparency Theme

DailyPress

StudioWordPress Premiere

SIMPLY

Son Day

Equilibrium WordPress Theme

NewsWeek

Simple Balance 2.0

CSS Gallery

Probama Theme

Arthemia

Elegant Grunge

無料で使えるWordPressテーマギャラリー / お金を払ってでも手に入れたいプレミアムテーマまとめ

admin — Wed, 14 May 2008 04:57:09 +0000

WordPressのテーマをデザインからすべて自分で作るのはなかなか大変ですよね。

無料で使えるWordPressのテーマは、なかなかクオリティの高いものがたくさん配布されているので、デザインやコーディングが苦手な方は、無料のテーマを使ってはいかがでしょうか。

ダウンロードしたテーマをそのまま使ってもよし、すこし自分で手を加えてもよし。デザインやコーディングの参考にも使えそうですね。

今回は、無料で使えるWordPressのテーマをたくさんまとめられているギャラリー的なサイトをまとめてみました。

無料WordPressテーマギャラリー

Free WordPress Themes and More at Fresheezy!

Top WordPress Themes – Best Free Themes for WordPress

wpthemesfree.com

theme-wordpress.com

blogstheme.com

wpskins.org

skinpress.com

unmatchedthemes.com

osskins.com

themesbase.com

freewpthemes.net

freewordpressthemes.com

templates.arcsin.se

freelayouts.com

graphpaperpress.com

themes.rock-kitty.net

themelab.com

templatesbrowser.com

siteground.com

wp-themes.designdisease.com

askgraphics.com

有料WordPressプレミアムテーマ

こちらからは、有料のテーマをまとめてみました。プレミアムのテーマは、既にプラグインやスクリプトが組み込まれていたり、見せ方が少し凝っていたりとお金を出しても、どんな風になってるのか中身が見てみたくなるテーマがいっぱいです。

wordpressthemesmarket.com

revolutiontheme.com

quommunication.com

wpdesigner.com

ithemes.com

wpremix.com

omnitheme.com

premiumthemes.net

感覚で使えそうなウェブデザインジェネレータ集

admin — Wed, 05 Mar 2008 19:24:06 +0000

凝ったデザインのブログやサイトを作りたいけど、何もないところから、スタートするのは結構大変ですよね。

そんな時には、テンプレートジェネレータがおすすめです。

今回は、なるべく感覚で使えそうなウェブデザインのテンプレートジェネレータをいくつかまとめてみました。

PowerPointテンプレートサイトいろいろ

admin — Thu, 28 Feb 2008 22:14:50 +0000

みなさん、仕事でPowerPointを使われる機会が多いのではないでしょうか。

資料作成もセンスが問われますね。。

きれいなデザインの資料はやっぱり、見ていて気持ちがいいですよね。

本日は、無料で使えるPowerPointのテンプレートサイトを中心にいろいろとまとめてみました。

6. Chart Chooser

PowerPointとExcel用のチャートがダウンロードできます。種類も豊富でいい感じですね。

DesignWalker » テンプレート

HTML5で構築されたテンプレート・フレームワークいろいろ

グリッドデザインに使えるツールいろいろ

無料で使えるWordPressテーマ 2009年 厳選100+

ビジネスサイトに使えるレイアウトのチュートリアルいっぱい

無料で使えるWordPressテーマ 2009年厳選100+