ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね。 Free HTML templates for websites and landing pages -Inovatik Inovatikの特徴 HTMLテンプレートのダウンロード Inovatikの無料HTMLテンプレート Inovatikの特徴 Inovatikはフロントエンドデベロッパーが実装した、ランディングページや小規模Webサイト用のHTMLテンプレートを無料でダウンロードできます。 すべてのHTMLテンプレートはMITライセンスで、

当記事で紹介している2020年8月版のデザイン・テンプレートの公開は終了しました。最新版は、テンプレート配布ページからダウンロードしてください。 パワーポイント用デザイン・テンプレート、2020年8月版を公開しました。今回はテンプレートをルール編とパーツ集の2部構成に再編。前者にはプレゼン資料におけるデザインの原則を、一方後者はプレゼン資料頻出の要素をデザイン済みの状態で収録しています。両者を組み合わせれば、プレゼン資料のビジュアルに妥協することなく、ロジックの構築に集中できますよ。日々のプレゼン資料作りにお役立てください！ デザイン・テンプレートの構成 まずはじめにデザイン・テンプレートの構成について。当テンプレートは大別すると「デザインルール編」と「デザインパーツ集」の2種類に分かれます。前者はプレゼン資料おすすめのスライドサイズやテーマカラー、フォントなどのデザインルールが定義されて

PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要

Material Designを使用してみたいけど、時間がない、手間をかけたくない、という人にぴったりな、Material Designが採用された商用でも個人でも無料で利用できるBootstrap 4ベースの新作テンプレートを紹介します。 企業向けサイト、プロダクトのランディングページ、ポートフォリオやギャラリー、ブログ用のテンプレートが揃っています。 Material Design for Bootstrap 4 MDB- GitHub Bootstrapの特徴や基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrap 4の主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 Bootstrapのグリッドシステムの基本な使い方 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ ではMaterial De

フォームを実装するのが苦手、という人は少なくないと思います。 お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。 Boilerform Boilerform -GitHub Boilerformのデモ Boilerformの使い方 Boilerformのデモ デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。 まずは、フォームのパターン ライブラリから。 「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。

Bootstrap, Foundation, Materializeなどのフレームワークは手軽に利用できるとは言え、それでも一から始めるのは面倒です。これらのフレームワークを簡単にカスタマイズして利用できる無料の国産サービスを紹介します。 ランディングページやブログをさくっと作りたい、ナビゲーションやカード型コンポーネントを利用したいなど、さまざまなテンプレートやテーマを利用できます。 Framework Template Editor Framework Template Editorの特徴 Framework Template Editorの機能 Framework Template Editorの使い方 Framework Template Editorの特徴 Framework Template Editorは、BootstrapやFoundationなどの人気が高いフレームワーク

最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。 もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。 Shardsのデモ ShardsのUIコンポーネント Shardsの使い方 Shardsのデモ ダウンロードファイルには、すぐに利用できるデモページも含まれています。 まずは、プロダクト・サービス向けの縦長ランディングページ。

もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。 はじめてのことで、何に仮装すれば迷いまくっています。 さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。 Nunjucks とは FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。 githubでのstar数は、4660（2017/10/26現在）です。 Nunjucks 特徴 node.js で動作 マクロ定義 オートエスケープ リッチブロックの継承 extends によるテンプレート継承 block によるエリアの継承 include による外部ファイル読み込み などです。 記述サンプル 以下が、Nunjucksのコードサンプルです

期待感を煽る！webサイトオープン前のカウントダウン用のフリーテンプレート集「Top 15+ Free Website Under Construction, Coming Soon Templates」 情報解禁やコンテンツ公開前のWebサイトでよく利用されるのが、リリース日までの日付をカウントダウンする表現。カウントダウンと共に時間が刻々と過ぎていく様子は、ユーザーの期待感を煽るのにぴったりです。今回ご紹介するのは、そんなカウントダウンページを作るためのフリーのデザインテンプレート集「Top 15+ Free Website Under Construction, Coming Soon Templates」です。 Black HTML5 Coming-soon Web Template – WebThemez どれも秒単位で公開日をカウントできる、様々なテイストのテンプレートが15点

TOP  >  Design , Tool  >  クリエイティブな企画書作成のためのKeynoteテンプレート「Startup Powerful Keynote Template」 デザインの提案に限らず、企画書を作成する機会は多いと思います。できれば企画書自体にも、クリエイティブ性を持たせておくと評価も高まるもの。そんな時に活用したい、クリエイティブな企画書作成のためのKeynoteテンプレート「Startup Powerful Keynote Template」を今回は紹介したいと思います。 Keynoteをベースとした32以上のテンプレートが集約されていますので、それぞれの場面で使い分けることもできそうです。 詳しくは以下 ベースとなるシンプルなテンプレートベースに、表紙、表組みやマップ、グラフやフロー、またタブレットやデスクトップパソコンの画面など、よく使用するであろうツールが用

CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしくは二行追加するだけで簡単に利用できます。 sakura sakura -GitHub sakuraの特徴 sakuraのデモ sakuraの使い方 sakuraの特徴 かなり古くさいデザインのページでも、モダンなページでも、わずか数秒で見栄えのよいページにすることができます。 使い方は簡単。外部ファイルを加えるだけで、既存のHTMLでさえも見栄えのよいデザインを適用できます。 即席のプロトタイプにも最適。特にバックエンドで作業する時に、簡単にスタイルを適用できます。 友達や叔母さんなど、CSSが難しいという人にも美しいブログが構築できます。 他のすべてのCSSフレームワーク

ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ

├── LICENSE ├── Makefile <- Makefile with commands like `make data` or `make train` ├── README.md <- The top-level README for developers using this project. ├── data │ ├── external <- Data from third party sources. │ ├── interim <- Intermediate data that has been transformed. │ ├── processed <- The final, canonical data sets for modeling. │ └── raw <- The original, immutable data dump. │ ├── docs

今時のかっこいいデザイン、素敵なエフェクトを備えたレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、HTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、レスポンシブ時のレイアウトのバリエーション、使い勝手のよいコンポーネント、気持ちいい繊細なアニメーションなど勉強にもなります。 Editorial デモページ 文字を見せることに拘ったシンプルなデザインのテンプレート。読むことが邪魔にならない繊細なアニメーションも素敵です。 各UIエレメントのデザインは、ハンバーガーメニューのElementsから。

どうも、まさとらん（@0310lan）です。 ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。 そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・無料」「低品質・高品質」などが混在していて見つけるのが大変だったりします。 そこで今回は、「無料・高品質」なテンプレートの中から使用用途別にカテゴリを分けて、さらに面倒な「登録」も不要なモノだけを厳選してご紹介しようと思うので参考にしてみてください！ ■「ブログサイト」に最適なテンプレート！ 【 Spore 】 「Spore」は、モダンブラウザに対応したレスポンシブなテンプレートになっており、「ブログ」向けとして最適です。 ページのトップに位置するフルスクリーンのテーマ画像が印象的で、縦幅の違うカード状に並べられた記事はシンプルながらも、ア