他と差がついた！最近のトレンドをおさえた一歩進んだエフェクトまとめ
作成：2015/04/27 更新：2016/06/29 Webデザイン > 今回は光の屈折や歪み・パーティクルなエフェクトをブラウザ上で表現可能にするチュートリアルをまとめました。ありきたりな見せ方をやめて、表現の幅を広げたいと感じたときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 透過や光に関する効果 １．プリズムエフェクト ２．パーティクルエフェクト ３．ジニーエフェクト ４．ブラーエフェクト（ドラッグ可能） ５．スクロールで背景がフェードする ニューメリック ６．ニューメリック スライダー ７．テキストフィールドを数値のみに限定する マテリアル アニメーション ８．波紋状に広がる効果 ９．タブ選択後、オーバーレイさせる １０．デイトピッカー その他 １１．フリック カルーセル １２．画像クリックで全幅スライダー表示 １３．様々な幾何学模様の作り方
WordPress本の著者としてWordPress初心者にオススメしたいプラグイン18選
紹介しているプラグインは、もちろん個人的にオススメするものなのですが、出版から半年も経つと、新しいプラグインがいくつもリリースされてますし、アップデートによって、新機能を実装したプラグインもあったりします。 今回のエントリで、そこの差分を埋めるというわけではないのですが、そうした新しいものも交えて、現時点で初心者にオススメしたいプラグインを、目的別にまとめてみました。 多機能系プラグイン JetPack for WordPress.com 拙著の中では部分的にしか触れていないのですが、これひとつ入れるだけで、新しい記事をソーシャルに自動でシェアしたり、無限スクロールに対応したり、関連記事を表示させたり、セキュリティを向上させたり、バックアップ(有料)させたり･･･などなど、さまざまなことが可能になります。 他にもスマホ対応や、OGP・Twitter Cardsへの対応、独自にテーマのCSS
動画素材が手元になくても背景に動画敷くウェブサイトを作る工程 - MEMOGRAPHIX
このまえ、こういうサイト作った。 Azusa Colors Keynote Theme by sanographixこのサイトでは背景に動画を敷いている。背景に動画敷くサイト、最近よく見る。自分でいくつか作っているうちに徐々に作り方が分かってきたので書きます。 動画を用意するそもそも動画素材を用意するのがわりと大変で、日頃から素材を撮り貯めている人はあまりいないと思う。ぼくも今まで自分で撮った動画は、なんか公園で鳩が動いてる動画とか、使いどころのないやつばかりだった。 動画素材が手元にない場合、クリエイティブ・コモンズ・ライセンスで動画配布しているサイトがあるので、活用するとよい。 Mazwaiかっこいい動画がいろいろある。Life Of Vids - Free Videos for Designers, Web Creatives & anyoneこっちはCC0なのでライセンス表記不要。
Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ
Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ：新人Webデザイナー／開発者も知っておきたい Web制作に長年携わる筆者が数あるテキストエディターの中から代表的な4つをピックアップ。機能別に違いをまとめてみたので、エディター選びの参考にしてほしい。 皆さんは普段、Web制作にどのエディター（テキストエディター）を使っているだろうか？ この記事を読んでいる方の中には、Webデザイナー／開発者になったばかりで常用しているエディターが決まっておらず、どれがいいのか探している方もいるかもしれない。また、今使っているエディターに不満があり、乗り換えを検討している方もいるかもしれない。 最近は、さまざまなエディターが登場しており好みに合わせて利用できるが、それぞれの特徴を把握し、自分に最適なものを選ぶためには、ある程度使ってみなければ分からない。
必見！SEO対策の基本の方法を分かりやすく解説します。 - スキナモノート
最終編集日：2017-3-10 はじめに サイトやコンテンツを作る上で外せないのがSEO対策。 実際にどういう事をするのがSEO対策なのか。今回はGoogleが推奨する内容を元に、イラストも付けて分かりやすくまとめていきたいと思います。SEO対策の中でも基本の部分です。今現在これだけでも充分に上位を取る事も可能です。実際にこの記事が「SEO対策」というキーワードで二番目に表示されています。現在は順位がさがってしまっています。 改めて書き直しもしたいと思いますが、SEOの基本を学ぶためのことが書かれています。まずはSEOとはどんなものか。それを探している人には分かりやすい内容で書いてます。 自分の再認識用に。これから学ぶ人の参考に、知っている人のおさらいに。この記事が役立つ情報となれば嬉しいです。 ※【サイト】と記述するのは【WEBサイト・ブログ】の意味です。 ※【コンテンツ】と記述するのは
初心者Webデザイナーがおさえておくべき最新ツール（デザイン編） | マイナビクリエイター
マイナビクリエイター公式ブログ「マイナビクリエイター編集部」を御覧の皆様ご機嫌麗しゅう。OZPAの表4というブログを運営しております@OZPAと申します。 普段は都内のデザイン会社でコーダー寄りのWebデザイナーとして働く会社員です。5年ほどDTP・グラフィックのデザインをしておりましたが、3年前の春から配置転換によりWeb担当として業務に臨んでおります。 この連載では、そんな「何もわからない状態からWebデザイナーとなった私」が、Webデザイナー・コーダーを目指して転職活動を行う方のためになるようなコラムを書かせて頂きますわよ！ さて。Webデザイナーにとって必須のアプリといえばAdobe PhotoshopとIllustratorです。 少し前までは、Webデザインカンプ製作はPhotoshopのみを使用することがほとんどでした。しかし、Retinaディスプレイを始めとする高画素デバイ
デザインの原理原則がわかる8つの記事 | creive
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フラットデザインがいい感じの円形ローダー実装jQueryプラグイン「CircularLoader.js」:phpspot開発日誌