ウェブフォントは異なる環境でもフォントの見栄えを確保する手段として、多くのウェブサイトで利用されています。 ウェブフォントはCSSとしては利用しやすいものの、HTML5 CanvasやWebGLを採用した場合にCSSのように簡単に使うことができません。この記事ではインタラクションコンテンツ制作で役立つようにHTML5 CanvasとWebGLでのウェブフォントの使い方をまとめました。本記事のサンプルコードはGitHubで公開していますので、ダウンロードして読み進めてください。 この記事で学べること ・ウェブフォントの先読み機能を実現するJSライブラリ「WebFontLoader」の使い方 ・FontAwesomeをプログラムで制御する方法 ・HTML5 Canvasでウェブフォントを使う方法 ・WebGLでウェブフォントを使う方法 この記事ではウェブフォントの題材として「Font Awes
Webサイトのデザインで大切なのは、小さなディテールの積み重ねです。一つひとつは些細なことかもしれませんが、それらをおろそかにしてしまうとWebサイト全体が台無しになってしまいます。 アマチュアのデザイナーが普通によくやってしまう間違いとその改善方法を紹介します。 Top 10 Mistakes that Make your Website Look Unprofessional 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. デザインされたテンプレートを使う時の注意点 2. Bootstrapのデフォルトのデザインを使ってませんか? 3. コンテンツを分かりやすくするフォントの使い方 4. 暗いカラーの背景はデザインが難しい 5. 似たようなボタンを数多く配置するのは逆効果 6. 空白スペースを効果的に使うシンプルなルール 7
こんにちは、ソウルドアウト株式会社のモッチです。 ランディングページで売上アップ!のつもりが、あれ?思うように売れない……。なんてことはありませんか? それは、ランディングページの基本中の基本が抜けてしまっているからかもしれません。 ランディングページでありがちなミスは? たとえば、こんなランディングページになっていませんか? 企業側の言いたいことを詰め込んでいる 商品・サービスと関係性の薄いメインビジュアルを使用している そもそも何の商品・サービスなのかがわからない 今回は、ランディングページの顔であり、売上改善に大きなインパクトを与える「ファーストビュー」にフォーカスして、改善すべきポイントをご紹介していきます。ぜひ、参考にしてみてください。 売上改善のカギ「ファーストビュー」とは? ファーストビューとは、Webページにアクセスした際に、スクロールせずに見えるブラウザの画面範囲のこと。
はじめに 仕事が全然取れないので、次のTOEICで950点くらいとって英語講師に転身しようかな、と考えているファイヤードです。 さて、デザインから実装までを行うウェブサイト制作を売りにして、私は活動し始めたのですが、ウェブサイトは私が作らなくてもいいのでは、と考えるようになりました。前提として、私は今のところ、小中規模の店舗や企業を中心にアプローチしています。 50ドルで買える高品質テーマの衝撃 ThemeForestに並んでいる50ドル前後のテーマやテンプレートを見て、それらよりも良い(同じくらい、じゃダメですよ)デザインのサイトを実装を含めて自信を持って作れるという制作者の人がいたら、手を挙げてくれませんか。もちろんいることでしょう。でも、たとえ作れるという人でも、50ドルというテンプレートのコストに時間対効果で敵うでしょうか。 今、私の手元には『デザイナーのためのプロの制作術が身につ
HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。 テーマの基準となる.htmlファイルを /WPの置かれているフォルダ/wp-content/themes/new_theme 内にコピーします。ファイル名は、index.php に変更。 「new_theme」は、好きなテーマファイル名でOKです。 css、js、画像フォルダは、既存のhtml郡の中に置いたままでもいいですし /new_theme内に複製コピーしてもOKです。 各ファイルパスだけ、相対パスだとWPのパーマリンク設定によってはうまく動かないことがあるので WPのテーマフォルダと違うところにある場合は絶対パスで http://xxxx.com/css/cs
Webフォントを使用して、Webサイトを制作すると、表現できるデザインの幅が格段に広がります。 何となく使用方法が難しいと思われがちなWebフォントですが、一度理解できれば意外に簡単です。 以下の記事でWebフォントの使用方法を解説したので、一読することをオススメします。 意外と簡単!Webフォントを理解しよう 今回は、日本語に対応しているWebフォントがダウンロードできるWebサイト25選をご紹介します。 1.Noto Sans Japanese https://www.google.com/get/noto/ Googleが提供しているフォントサイトです。 和文だけではなく、様々な言語の一般的なフォントが揃えられていますので、まず導入として使用してみることをおすすめします。 2.TypeSquare http://typesquare.com/ 日本で最も有名な和文フォントサイトです。
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり!」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います! ↑私が10年以上利用している会計ソフト! Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く