SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
スマートフォンの画面サイズに合わせてページを表示する - viewport
スマートフォンの画面サイズはパソコンと同様 JavaScript で取得できる。 <script> document.write("screen.width " + screen.width + "、" + "screen.height " + screen.height); </script> 横幅は screen.width、縦幅は screen.height。 iPhone 4S や iPod touch（第2世代）の Safari では screen.width = 320、screen.height = 480 と表示される。 ただ、横幅320ピクセルとなっているが、特に指定がなければページ自体は横幅 980 ピクセルとして表示される。 よって、横幅 320 ピクセルのページを作ってもページが小さく表示されてしまう。 同様に、width を特に指定していないフィーチャーフォン（ガ
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
文章校正など、ブログ記事作成に役立つ無料ツール6選
photo by liqueneコンテンツマーケティングの取り組みなどで、ブログ記事を書いていると大変なのが文章の校正です。 タイプミスや誤字脱字は信頼を失い、記事の価値を下げてしまいます。 しかし、人の手でブログ記事の校正・チェックをするのは、なかなか大変な作業です。 実はWeb上には、かんたんに文章校正ができるサービスをはじめ、ブログ記事の執筆後のチェックに役立つツールが無料で提供されています。 そこで、本日は私自身も使っていて、便利だと実感している文章校正やブログ記事執筆に役立つツールの中から、Web上ですぐに使える無料のツールを厳選してご紹介します。 これらのツールを活用すれば、文章校正にかかる負荷を軽減し、時間を圧倒的に短縮することができます。 日本語のタイポ/変換ミス/誤字脱字エラーをチェック 「Enno」 Ennoサイト 「Enno」は、誤字脱字や変換ミスなどの「日本語のあか
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
最近話題になったイケてるWebサービス・アプリ12選（2014年3月編）
3月も終わり4月が始まるということで、3月中に話題になったWebサービスやアプリを12個ほどご紹介します。 Presso（プレッソ） 先日はてながリリースした、ニュースアプリです。 既存のニュースアプリとの違いは、ユーザーの興味（カテゴリから選択する）にもとづいた情報が配信されるところ。そして1つ1つの記事に、はてなブックマーク経由で投稿されたコメントが表示されるのも特徴的です。デザインもフラットでいい感じです。 Webflow コードを書かなくても、レスポンシブで美しいWebサイトが簡単に作れるサービスが登場しました。しかも無料。 「Build beautiful, responsive websites without code.」 テンプレートもデザインが整っていて、サイトを作成したあとにコードを、画像ファイルも含めて書き出すことができるのには驚きました。ただ単に何かをつくるだけのコ
こんなに書いて大丈夫？2014年現在のSEOが超わかりやすく説明された「いちばんやさしい新しいSEOの教本」を読みました！｜男子ハック
本の紹介こんなに書いて大丈夫？2014年現在のSEOが超わかりやすく説明された「いちばんやさしい新しいSEOの教本」を読みました！2014年3月19日547 @JUNP_Nです。サイト運営をしているけれどSEOって何？どうしたらいいの？そもそもどういうこと？という初心者向けの基本的な内容から、中級者以上向けの内部対策、外部対策、ソーシャル対策、ウェブマスターツールの使い方までが超わかりやすく説明された「いちばんやさしい新しいSEOの教本」を読んだのでご紹介！ 「SEOの教本」はダテじゃない！これは何度も繰り返し読み込みたい内容ですよ！「SEOってよくわからない」と考えている人やネットに溢れるSEOについて書かれた記事を見て誤った理解をしている人は多いです。そんなSEO初心者には是非読んでもらいたい内容があふれている本でした。 ネットでよく見かける「SEO対策！」と書かれているような記事では
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
SEOコンテンツの作り方
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOで成功するためには、「コンテンツの質が何よりも大事だ」と誰もが言う。 おそらく、あなたも頭では分かっていても、実際に良質なコンテンツを作ろうとすると、そもそもどういうものを作れば良いか分からず悩んでいることだろう。 また、もし仮に良質なコンテンツを作れたとしても、それで本当に集客が倍増するのか自信が持てずジレンマに陥っているかもしれない。結論から言うと、SEOは良質なコンテンツを作ることが全てだ。 そしてそれさえ行えば、確実に大きな成功を手にすることができる。 しかし、多くの方が、そもそも良質なコンテンツとは何かを明確には分からずに、手探りで進めてしまっている。結果、ユーザーニーズとかけ離れたコンテンツを作ってしまい、結果につながら
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
シンプルなプリローダーを実装するCSS・「(cs)spinner」
これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web Directions
レスポンシブWebデザインの基礎
ソニック速報
