●Top
●Category
●Contact
●About
商用も無料!Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ
サイト構築 -制作
215
646
Post on:2014年11月5日
sponsors
Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。
Bootstrapは先週3.3.0がリリースされ、Bootstrap4の開発も進んでるそうです。4ではIE8はサポート外になる予定。
Oleose
デモページ
個人・商用利用無料。
縦長ページでスクロールに合わせてコンテンツがアニメーションで表示されるテンプレート。
Bondy
デモページ
個人・商用利用無料。
こちらも縦長ページのスクロールでコンテンツが表示するテンプレートで、制作者用にカスタマイズを考慮した作りになっています。
SevenApp
デモページ
個人・商用利用無料。
スマホアプリのランディングページ用のテンプレート。Sassサポート。
Coming Soon
デモページ
個人・商用利用無料。
CSS3アニメーションを使った楽しいカミングスーン用のテンプレート。
Lonely
デモページ
個人・商用利用無料。
スクロールするとかわいいアニメーションで要素が表示される縦長ページのテンプレート。
Bocor
デモページ
個人・商用利用無料。
スクロールするとさまざまなアニメーションで要素が表示される縦長ページのテンプレート。
Green
デモページ
個人・商用利用無料。
レスポンシブ対応のスライダーを備えた縦長ページのテンプレート。
devAid
デモページ
個人・商用利用無料。
Web制作者のポートフォリオ用のテンプレート。4つのカラースキームが用意されています。
Developer
デモページ
個人・商用利用無料。
上記と同じ作者の制作者向けのポートフォリオ用のテンプレートで、こちらはシンプルなデザイン。
Single Pager -Light&Dark
デモページ
個人・商用利用無料。
ライトとダーク、2種類のカラースキームを備えた縦長ページのテンプレート。
Video Background
デモページ
個人・商用利用無料。
背景に動画を使った縦長ページのテンプレート。
Magister
デモページ
個人・商用利用無料。
カミングスーンなどのランディングページ用のテンプレート。
SuperAwesome
デモページ
個人・商用利用無料。
こちらもカミングスーン用で、アニメーションを使ったかっこいい仕上がりになっています。
Brushed
デモページ
個人・商用利用無料。
iPhone, iPad, MacBookのRetinaディスプレイに最適化された縦長ページのテンプレート。
Happy Scroll
デモページ
個人・商用利用無料。
縦長ページで、コンテンツをカーテンのように引き上げて表示するテンプレート。
Holo
デモページ
個人・商用利用無料。
サイドバーにオフキャンバスのナビゲーションを備えたフラットなスタイルのテンプレート。
Google Plus
デモページ
個人・商用利用無料。
上部に二段のナビゲーションバーを備えたGoogle+にインスパイアされたテンプレート。
Facebook
デモページ
個人・商用利用無料。
Facebookにインスパイアされたデザインで、サイドにオフキャンバスのナビゲーションを備えたテンプレート。
Colorful Flat
デモページ
個人・商用利用無料。
上部にスライダーを配置したランディングページ用のテンプレート。
Landing Page with Login and Signup
個人・商用利用無料。
ログインとサインアップを備えたランディングページ用のテンプレート。
JANStrap
デモページ
個人・商用利用無料。
ビジネスやコーポートレート、ポートフォリオ用の縦長ページのテンプレート。
sponsors
Related Posts
関連記事が見つかりませんでした。
215
646
top of page
Sponsors
誰よりも先をリードするWordPressテーマTCD
coliss
Recnet Entry
●Figmaの実践的な使い方がこれでよく分かる!UIコンポーネントの作り方にフォーカスされた解説書 -Figmaで作るUIデザインアイデア集
●Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
●地味に役立つ! 手描きでさまざまな形状がいい感じ、200種類以上の矢印・アローのSVG素材 -Handy Arrows
●これはすごい便利! WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
●CSS Gridの便利な無料ツールが登場! レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
●FigmaのAIによる学習﹁コンテンツのトレーニング﹂をオフにする方法、独自性・機密性の高いデザインを扱っている場合は注意が必要です
●ゴシック体の素晴らしい世界が広がる! 商用利用無料、可読性に優れたフリーフォント﹁永代ゴシック﹂がリリース
●Web制作・デザイン・イラスト関連のこんな大規模Kindleセールは初めて! 本日終了のもあるので、お見逃しないように
Pickup Entry
●2024年用、日本語のフリーフォント707種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
●手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
●おしゃれな手書き! 筆記体の英語フリーフォントの総まとめ
●商用利用無料、国内のフリーイラスト素材の総まとめ
●商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
●フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
●いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
●背景素材に困った時に!ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
●2024年のトレンドカラーは、癒やしのカラー﹁ピーチファズ︵Peach Fuzz︶﹂
●色々な色の名前、伝統色の名前が分かるサイトのまとめ
●VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
●最近の実装に合わせたHTMLテンプレート
●5分で完璧に分かる!CSS Gridの基本的な使い方を解説
●独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル
●CSS Flexbox の各プロパティの使い方を詳しく解説
●CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
●CSSの中央揃えで、最も万能で信頼できる実装テクニック
●2024年、現在の環境に適したリセットCSSのまとめ
●2024年版、CSSフレームワークのまとめ
●Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
●Font Awesome アイコンの使い方と便利な機能のまとめ
●Photoshopの新機能がかなり便利!かゆいところに手が届く改善点が盛りだくさん
●Photoshopの選択範囲や切り抜きはこれが一番簡単で正確!CC 2021で進化した選択範囲とマスクの作成
●UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介
●2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
●ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
●フォントやタイポグラフィの知識・テクニックを学ぶまとめ
●無料で高品質!レスポンシブ対応のWordPressのテーマファイルのまとめ
●プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
●写真がもっと楽しくなる!写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
●黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
●黄金比をサイトのデザインに取り入れる簡単な3つの方法
●フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
● 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
●著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Recommend
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書︵レビュー記事︶
Adobeの進化がすごすぎる! 生成AIによるデザインの新しい作り方が学べるデザイン書︵紹介記事︶
top of page
Category
●サイト構築 -調査・分析
●サイト構築 -設計
●サイト構築 -制作
●サイト構築 -ユーザビリティ
●サイト構築 -ライティング
●サイト構築 -デザイン
●サイト構築 -CSS
●サイト構築 -JavaScript
●サイト構築 -スタイル ガイド
●サイト構築 -検証
●サイト構築 -運用・更新
●SEO対策・検索エンジン
●WordPress
●WordPressのプラグイン
●Freebies︵無料素材︶
●ウェブ サービス
●ハードウェア
●ソフトウェア・アプリケーション
●ブラウザ
●ブラウザ -Internet Explorer
●ブラウザ -Firefox
●ブラウザ -Opera
●ブラウザ -Safari
●ブラウザ -Chrome
●書籍紹介、書評
●Life︵ライフハック︶
●Digress︵雑記・お知らせ︶
●Sitemap︵記事一覧︶
Blog Info
●follow me on Twitter
●subscribe to my RSS
●Powered by WordPress
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
©2024 coliss