2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。
ランディングページ集めました。
2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。
Font-familyメーカー：フォント種類一覧からサクッと指定
Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 Meiryo UI 'Meiryo UI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'Yu Gothic', 愛のあるユニークで豊かな書体 Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体 Windows8.1~ Yu Gothic UI 'Yu Gothic UI', 愛のあるユニークで豊かな書体 Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MS UIゴシック 'MS UI Gothic', 愛のあるユニークで豊かな書体 MS明
セマンティック HTML とはなんだろう | Kangaroonote
HTML5 の説明でよくでてくるのがセマンティクスの強化。 ここでひとつの疑問が浮かぶ。「はて、セマンティクスとはなんじゃろうか?」 これをひとに聞かれた時、案外言葉に詰まるので、ここはひとつ、セマンティクスとはなにかを簡単に説明する方法を考えてみる。 セマンティクスの意味 セマンティック HTML を考える前に、そもそもセマンティクスとはどういうものなのか。 セマンティクスとは言語学の領域のひとつで、日本語にすると意味論になる。 意味論はざっくり言うと言葉と意味の関係を扱う。 例えば食事中に「そこの醤油差しとって」と言われたとする。そしてその醤油差しが仮に空だったとする。 これを意味論的に解釈すると、醤油差しが欲しいという要求に応えるために空の醤油差しをとって相手に渡すことになる。 もうひとつの領域である語用論で「そこの醤油差しとって」を解釈すると、醤油差しが欲しいのは食べ物に醤油をかけ
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホ・HTML5のSEO塾.com
SEO塾ブログnewモバイルファースト / マテリアルデザイン / JSON-LD WebP/ 4K DPR3 レスポンシブイメージ gridレイアウト / flexboxコンテンツ / レガシーWeb終焉！ モダンWebの証明！ comからjpへ CSS メディアクエリ（@media）ブレイクポイント受難 レスポンシブWebデザイン崩壊！？あくまでも自社用として、必要なことだけのまとめ 検索しても、スバリの情報がなかなか見つからない。また、いろいろ惑わされて、現場が騒がしい 弊社も、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ パソコンにつないだフルHD（1920×1080）モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている なお、PCファー
info@とは? 問い合わせ対応に欠かせない会社用メールアドレスの使い方を解説 | 初代編集長ブログ―安田英久
「info@」や「webmaster@」から始まるメールボックス、御社のサイトでは用意していますか？実は、企業サイトが設置するべき代表アドレスにはルールがあります。今回はWeb担当者に関係するアドレスを中心に紹介。問い合わせ対応や広報など、メールの目的に合わせて正しく使い分けましょう。 今日は、企業サイトが設置しておくべきメールアドレスのルールについて。御社のサイトでは、「info@example.jp」や「webmaster@example.jp」といったメールボックスを設置していますか？ 実はこうしたメールアドレスにはルールがあるのです。 御社のサイトでは、独自ドメイン名を使っていますよね？ では、次のようなメールアドレス、ちゃんと設けて対応していますか？ info@example.jpsales@example.jpsupport@example.jpmarketing@exampl
サイトにパスワードをかける方法（.htaccessでBasic認証） - ウェブ学のすすめ
サイトにパスワードをかける方法として.htaccessファイルを使ったBasic（ベーシック）認証があります。 実際にレンタルサーバー「freeweb」にアップロードしたサイトにBasic認証を設定する手順を残します。 ↓Basic認証を設定するとこのようなユーザー名＆パスワード入力画面が現れます。 ステップ１：.htaccess まずは.htaccessファイルを作成します。 TeraPadなどのテキストエディターで AuthType Basic AuthName "表示されるメッセージ" //半角英数記号のみを使う AuthUserFile "パスワードを書いたファイルの所在" //サーバー内のフルパス require valid-user のように入力し、ファイル名を「.htaccess」で保存。 （例）freewebの場合 AuthType Basic AuthName "Inpu
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
WordPressでindex.phpとindex.htmlを同時に使う方法！サイトリニューアル中に共存させる - ホワイトベアー株式会社
HOMEWEB制作WordPressでindex.phpとindex.htmlを同時に使う方法！サイトリニューアル中に共存させる こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。 htmlで作られているWEBサイトをWordPressに作り変える時に、index.phpとindex.htmlを一時的に両方使いたい場合があると思います。 クライアントのコーポレートサイトをリニューアルする時など、ドメイン直下にindex.htmlがある場合、そこにWordPressをインストールすると、WordPressのトップページがうまく表示されません。 なぜなら、元からあるindex.htmlにリダイレクトされてしまい、index.htmlの内容がトップページに表示されるからです。 例えば、「http://example.com」というドメインを使用しているとします。 WordPressの
名刺のデザインを新しくしました
2014年8月19日 インスピレーション, お知らせ, 名刺 いつもお世話になっている名刺の印刷会社、SuperPrintさんが新しい用紙やオプション加工を追加したとのことで、名刺のデザイン変えたいなーと思っていたこともあり、わくわくしながら試してみました！シンプルな名刺とオプション加工てんこ盛りのデザイン名刺作ったので、SuperPrintさんへの感謝の気持ちを込めて記事にしてみます！ ↑私が10年以上利用している会計ソフト！ SuperPrint また名刺作ってみました 一体何パターン目w 昔から使っている透明名刺もお気に入りなのですが、プラスチックなので表面が傷つきやすかったり、読みにくかったりするんですよね…。ポートフォリオサイトもリデザインしたので、名刺もリデザインすることにしました。 デザイン重視の名刺。オプション加工等てんこ盛りでデザインしたので、仕様なんぞ紹介します。 用紙
意外とできてる会社ばかりではない！？Webデザインを行う前にすべき、Webディレクション作業まとめ。
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております！（宣伝） えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段：コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る（共通言語となる目標を決める） 4.ポジション設定をする（競合に対しての強みを見つける） 5.ペルソナ作り（
副業でWebデザインで稼ぐまでの準備・手法・ツールの11のまとめ
副業でWebデザインをやりたい人はいつの時代も多くいます。人気の理由は身近で、パソコンさえあれば自宅でできるという敷居の低さでしょう。特に、副業でWebデザインをやりたい方は女性が多い傾向にあります。 やり方次第では独立なんかもできるという期待もあるのだと思います。副業でWebデザインは大きく稼げるとは言えませんが、数万円や数十万円程度なら十分に稼ぐことはできます。 例えば、副業でもWebデザインの案件を1ヶ月に1本客単価10万円のをコンスタントにとっていれば結構な副収入になります。 しかし、当然それまでにはそれだけの実力や実績は必要になってきます。そこで、副業でWebデザインをして稼いでいくまでの実際の「準備」「手法」「必須ツール」の流れをここで紹介したいと思います。 3つ例を出してみましたが、だいたいこの3つぐらいの段階に別れると思います。下にいく程、本気度が高くなっています。 で、も
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
ディレクション費って何？Webサイト制作費の内訳を大公開！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。WebディレクターのJackです。 ぶっちゃけ、Web担当者は「サイト制作にいくらかかるの？」ということが気にかかりますよね。とくに皆さんによく聞かれるのはディレクション費について。 「ディレクション費？ プランニング費？ いらないでしょ？ 値引きしてよ！」 そう思った方！ それは危険です！ Webディレクターの働きは目に見えづらいため、そう考える方も多いとは思います。しかし、プロジェクトの成否はWebディレクターにかかっているといっても過言ではありません。 本記事では、ディレクション費の内訳や、Webディレクターの役割、必要性についてご説明できればと思います。 ディレクション費ってなに？ Web制作におけるディレクション費とは、一言でいうとWebディレクターの稼働対価のことです。いわゆる人件費ですね。 たとえば下記のような稼働に対してかかってきます。 打ち合わせ（ヒアリング）
ブラウザまたはOS毎にCSSを記述できる『CSS Browser Selector』[javascript]
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき 最近は「ie6 no more」のようなIE6撲滅キャンペーン等でIE6も大方死んできましたがちょっと前はホントにウザかったですよね。 KoToRiはハック用にcssファイルをいちいち設けて「* html hoge { color: red; }」とか書いてましたよ。 Chromeのハックだけいくら検索して試しても全然効かなくて困ったこともありました。 懐かしい。。。 その頃に『CSS Browser Selector』を知っていればと思うと悔やんでも悔やみきれません笑 しかも『CSS Browser Selector』はブラウザ毎だけではなくOS毎にcssを書けるのでiPhoneのみとかiPadのみとかも
![ブラウザまたはOS毎にCSSを記述できる『CSS Browser Selector』[javascript]](https://cdn-ak-scissors.b.st-hatena.com/image/square/64b65513080a5c7e7742d8e84442db512db545a7/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fcssbrowserselector.gif)
Webデザイナー必読？！著作権について知っておくべき10のこと - kojika17
Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日本の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queriesの指定について - Qiita
★【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！ | nuconeco
http://hapisupu.com/2015/10/font-awesome-h2-h3-icon-only-css-stinger5/
CSSのフォントサイズ指定『px、em、%、rem』それぞれの違いと変換 | InfinityScope