テンプレートを使って簡単にホームページが作れるサービス6選
ホームページを自分で作成する方法には、WordPressに代表されるCMSを用いるか、WIXのようなホームページ作成サービスを利用する方法、テキストエディタで作ったHTMLやCSSなどのソースファイルをサーバーにアップロードする方法の3種類があります。 ホームページ作成に関する知識に自身が無い場合、自分の作りたいイメージをホームページに再現するためには、はじめからHTMLやCSSでコーディングするのではなく、レイアウトやデザインがそのイメージに近いテンプレートを利用するのが良いでしょう。 今回は、テンプレートを利用してホームページを簡単に作成できるサービスや、テンプレートを提供しているサイトなどを紹介します。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集 | コリス
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
サイトマップの実装で面倒な階層を繋ぐラインも簡単に実装できるサイトマップ用スタイルシート -Slickmap CSS
Flexboxで実装された美しいサイトマップを簡単に実装できるビジュアル サイトマップ ツールを紹介します。サイトマップはレスポンシブ対応で、第4階層までのコンテンツに対応しています。 階層を繋ぐラインなど、実装が面倒な要素も簡単に利用できます。
デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート
// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is 100%, equivalent to 16px; @return #{$numSize}; } // Mixin that will include the fall back px declaratio
![[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/68f33993450e46d15bbdfbb5207d0da2c88fffc7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018071905-02.png)
こんなにある！WordPressに替わる便利なCMS・プラットフォーム14選
この記事は、2018年7月20日に公開された記事を再編集しています。 本記事内で紹介しているOne Pageは株式会社ベーシック提供のサービスです CMSと聞くと、WordPressを思い浮かべる方が多いかもしれません。しかしCMSには、インストール型やAPI型、Webサービス型など様々な種類があります。今回は、WordPress以外でも便利に活用できるCMSを紹介します。 それぞれのCMSには特徴があるので、自分にあったCMSを見つけてみましょう。 WordPressの代替として使えるCMS・プラットフォーム 1. One Page［PR］ One Page One Pageはホームページ作成の初心者におすすめのCMSです。 チュートリアル機能を実装しているので、操作方法を5分程度で学ぶことができる上、 400種類以上のデザインとドラッグ＆ドロップの簡単操作によって、3ステップでページ公
Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト
商用可のラベルとタグの無料素材 一覧 紙のテクスチャ素材をつかったラベルやアイコン素材をダウンロードできます。
商用利用無料、和紙・和風の紙のテクスチャ素材がダウンロードできるサイトのまとめ
和紙・和風の紙、畳や段ボールやノートなどのテクスチャ素材がダウンロードできるサイトを紹介します。 そのまま背景に使ってもよし、写真やイラストにオーバーレイさせてもよし、テクスチャ素材は何かと便利ですね。 素材: WASHI Japanese Papers ここで紹介しているサイトはすべて、個人でも商用でも、Webでもアプリでも紙でも無料で利用できます。 ちなみに、上の素材だけ期間限定無料です。 和紙.pw 個人・商用利用、無料。 写真ACなどを運営しているACワークスの新サービス、今度は和紙素材の専門サイトです。 ローンチ記念として、和紙のテクスチャ素材100点が完全無料でダウンロードできます！ ※要メールアドレス、初回アクセスから24時間のみ有効。
要件定義、要件定義、一体なにをどこまで定義すればいいんだ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Web事業部マネージャーのさささん（さっさん）です。 Web制作の現場ではプロジェクト開始時に「要件定義」の工程から作業を着手することが一般的です。ただし、いきなり要件を定義するわけではなく、顧客にヒアリングしたうえで課題の整理、要求の整理をおこない、要件定義として落とし込みます。 私は新卒からシステム開発の現場にいたので、要件定義に対して抵抗はありませんでしたが、Web業界で活動するようになってから要件定義がしっかりおこなわれていないプロジェクトがあることに驚きました。また、苦手というか、なにをすればいいのか分からない人たちがけっこういることに気づきました。 そこで今回は、「要件定義ってざっくりとなにをすればいいのか」をチェックリスト形式で紹介いたします。実際に要件定義が必要な場面でぜひ活用してもらえればと思います。 要件定義すべきこと 1. 制作の背景と目的 1.1. 制作
アイコン使いや図版が参考になるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 突然ですが、アイコンや図版のデザインに苦労したことってありませんか？ 僕はけっこう毎回苦労するので今回のブログで「アイコン使いや図版が上手いな」と思うサイトを集めてみました。 TAKAO 599 MUSEUM https://www.takao599museum.jp/ GIFアニでアイコンを動かしているのがとても可愛いですね！ 下層ページで使用しているアイコンも動かしてたり図版を丁寧に作っていたりと、しっかりとデザインにコストをかけている好印象なサイトです。ラインアイコンの線を太くすると親しみやすい印象になりますね。 Web design tools for designers and developers | Webflow https://webflow.com/designer 透明感のある色使いのアイコンは今後新たなトレンドとなりそうですね。サイ
SEOについてちょっと知ってみませんか？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ マーケ系ディレクターのRISHです！ ページ制作のお打ち合わせの際に、「そういえばLIGさんって、SEO対策ってできるんですか？」とご質問いただくことが、ここ最近増えてきています。 もちろんLIGでSEOのご相談もお受けすることは可能です。 今回はSEOについての基礎知識をご紹介したいと思います。 SEOとは SEOの由来ですが、むかしむかし、ある会社に瀬尾さんというマーケティング担当の方がいました。その瀬尾さんの最も得意とするのが、検索エンジン最適化だったので、そのままSEOと略されるようになりました。嘘です。 SEOは「Search Engine Optimization」（検索エンジン最適化）の頭文字をとったもので、検索エンジンで何か特定のキーワードで検索されたときに、意図的にサイトの情報を検索結果の上位に表示させるマーケティング手法のことです。 SEMとは SEOと並
WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」
WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」 Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。 Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご
豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」
TOP > Design , Font > 豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」 タイポグラフィ自体にデザイン性を持たせることで、ぱっと華やかなものにしてくれます。今回ご紹介する「Flower Bouquet SVG Font」は、美しい花とともに可変性の高いSVGに対応しているフリーフォントになります。 バラやパンジーなどの色鮮やかで華やかな雰囲気が特徴。デザインを彩り鮮やかに演出してくれます。 詳しくは以下 色とりどりの薔薇やパンジーなどの花は、色のはっきりとしたクラシックタイプと柔らかい雰囲気が水彩の淡いタイプの2バージョンで作成されています。ポスターやWEBサイト、ちょっとした服飾のデザイン、パッケージなどにも使用することが可能。シンプルなデザインに花を添えるにはぴったりなタイポグラフィとなっています。 ここまで精度の高いものを
デザインに使いたい最新のフリーフォントまとめ「21 Fresh Free Fonts For Graphic Designers」
TOP > Font > デザインに使いたい最新のフリーフォントまとめ「21 Fresh Free Fonts For Graphic Designers」 クオリティの高いフリーフォントは制作を支えてくれるデザインの強い味方。多種多様なフリーフォントを揃えておけばコストを抑えられる他、デザインの引き出しも広がります。今回ご紹介するのはそんなデザインにぜひ使いたい最新のフリーフォントをまとめた「21 Fresh Free Fonts For Graphic Designers」です。 Fresh Free Fonts Typefaces | Fonts | Graphic Design Junction ラフなテイストのものからコーポレートにも使えるスマートものまで、多種多様なフォントが全部で21種類紹介されています。その中から幾つか、これはと思ったフォントをピックアップしてご紹介
サイトのヘッダー・フッター・ページの前後などに任意のコードを追加できるWordPressプラグイン「Add to All」 | TechMemo
Add to Allは、WEBサイトのヘッダーやフッター、ページの前後などに任意のコードを追加することができるWordPressプラグインです。管理画面上から色んな場所にHTMLなどを追加することができます。 Add to Allのインストール インストール手順は以下の通りです。 Add to Allをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Add to Allを有効化します。 Add to Allの使い方 WordPress管理画面で[設定] – [Add to All]にアクセスして、それぞれのタブで設定を行います。 Third Party Third Partyタブでは、Google AnalyticsのトラッキングコードやSearch Consoleの認証コードなどを設定
CSSだけでスクロールに応じたプログレスバー | かちびと.net
Result スクロールするとプログレスバーが進んで、 あとどれくらいページの高さがあるか分かるようにするやつ css header { position: fixed; top: 0; height: 125px; width: 100%; background: white; } main { margin-top: 128px; } @supports (height: 100vh) { body { background: linear-gradient(to right top, #0089f2 50%, #ddd 50%); background-size: 100% calc(100% - 100vh + 129px); background-repeat: no-repeat; } body:before { content: ""; position: fixed; to
あふれるホスピタリティ！ 気がきくCSSプロパティの精鋭たちを紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
あったらいいな、コンビニのスイーツデリバリー。こんにちは、フロントエンドエンジニアのザワです。 我々フロントエンドは、普段から何十種類というCSSプロパティを駆使してWebサイトの見た目を作るお仕事をしています。今回は、そのプロパティの中でも、渋くて優しくて気のきくジェントルマン、カウンターバーで「お隣の方からです……」的な、ホスピタリティあふれるCSSプロパティにフォーカスしていきたいと思います。 pointer-events: none; 効果 クリックやタッチイベントを無効化する。 場面 使う場面としては、スマホ画面などでよく見られる、ハンバーガーメニューをクリックして表示されるメニュー画面の表示非表示などです。opacityを0に設定すると要素が透明になって見た目では見えなくなりますが、要素自体は存在するのでクリックできてしまいます。 そこで「pointer-events: non
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴ丸フォントがかわいい！ロゴにも本文にもぴったり、丸めで縦長の日本語フリーフォント -コーポレート・ロゴ丸
