女子高生が書くような文字をイメージしてデザインされたフリーの日本語フォントを紹介します。 Webデザインだけでなく、フライヤーや同人誌などの紙、映像、ロゴなどにも無料で利用できます。 フォント:JKゴシック 画像:Mika☆Rika JKゴシックは女子高生が書いたような文字をイメージし、懐は大きめだけど全体的にこじんまりと丸っこく、曲線の最後を控えめにデザインされたフォントです。
視認性が高く、シンプルですっきりしたデザインの「DIN」にインスパイアされて作成された商用でも無料で利用できるフリーフォント「Gidole」と「Gidolinya」を紹介します。 Gidoleはすっきりしたデザイン、Gidolinyaはカーブを緩くしたかわいいデザインです。
Webページを見る時、ブラウザはどのくらいのサイズにしていますか? フルスクリーン? 小さいサイズ? 縦長or横長? ページを制作する際、レイアウトで重要なポイントはその幅ですが、高さを見落としてしまうと表示されないコンテンツに気がつかなかったなどクリティカルな問題になることもあります。 そんなブラウザの高さをみんながどのくらいにしているか統計をとっているサイトを紹介します。 I am The Fold I am The Foldでは、ページが表示された際のビューポートの高さを記録し、その統計を表示しています。 現時点でビューポートの高さで集中しているポイントは、504px, 568px, 667px, 775px, 798px, 1392px, 1522px、という感じです。 800px, 1000pxあたりが特に集中してますね。
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
紙に書いた文字でも、IllustratorやPhotoshopで作成した文字でも、その文字からオリジナルのフォントを簡単に作成できる無料のオンラインサービスを紹介します。 作成できるフォントはTrueType、OpenTypeの2種類です。 ひらがな、カタカナ、漢字、絵文字などの日本語、英語、フランス語をはじめ、ギリシャ文字、キリル文字、数式記号などにも対応しています。 ※漢字は数が少なめ。 PaintFont 使い方は簡単。 フォントに使用する文字を決めて用紙を作成し、その用紙に文字を書き、それをアップロードしてフォントを作成します。 Step 1: 最初の準備 Step 2: 文字を手書きする Step 3: 手書きした文字からフォントを作成 Step 1: 最初の準備 フォントに使用する文字を決め、手書きする用のファイルを作成します。 まずは、作成するフォントに含まれる文字を設定。
デモのアニメーションGIF 実装 HTML デモページの中央のセクション(背景グリーンの箇所)のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- モーダルコンテンツ --> </div> </div> <a href="#0" class="cd-modal-close">Close</a> </section> ボタン、モーダルコンテンツ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真:re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。 Skyline Skyline -GitHub Skylineでは気になるCSSのテクニックがたくさん使われています。 classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boilerplate、コンポーネントのアイデアはBootstrap、そしてSCSSで書かれたオブジェクト指向のCSSです。 「BEM」とは、ブロック(Block)、エレメント(Element)、モディファイア(Modifier)の頭文字をとったもので、各要素を3つのどれかに必ず属するものとして考えます。 例えば、ページにはヘッダ・コンテンツ・フッタのブロックがあり、ヘッダブロックにはロゴ・メニュー・検索
数行のコードをコピペするだけで、テトリスをWebページに簡単に設置できるjQueryのプラグインを紹介します。 テトリスは実際にプレイすることが可能で、スコア機能もついています。しかもレスポンシブ対応! デモ:Try 操作は、キーボードのz, xで回転、矢印キーで移動です。 左右の矢印をクリックすると、テーマが変わります。 テーマはVim風、ゲームボーイ風、レトロ風など、いろいろ揃っています。 Blockrain.jsの使い方 Step 1: HTML テトリス用の空divを配置します。 <div class="game" style="width:250px; height:500px;"></div> Step 2: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="jquery.js">
個人でも商用でも、クライアントのプロジェクトでも無料で利用できる高品質な写真素材がダウンロードできるストックフォトサイトを紹介します。 27個のサイト、すべてクレジット表記やバックリンクの必要がないので、非常に利用しやすいと思います。
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか? 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
Webデザインは常に進化しており、活気にあふれている世界です。現在のWebデザインの状況を確認しながら、2015年の予測されるトレンドを紹介します。 Webデザイナー・ディレクターだけでなく、Web制作に携わる人は知っておいて損はないキーワードばかりです。 Web Design Trends That Will Rule 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 高品質なストックフォト 単色の背景 動画を使った背景 面白いナビゲーション カード・タイル型レイアウト 固定配置のブロック パララックスは繊細に いかにスクロールしてもらえるか 今までとは違うイラストの使い方 ビッグデータ・グラフ プロダクトファースト フラットデザインは成長し続けている モバイルファースト 人間的な温かみのあるデザイン UXのちょっとした工夫
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く