2013年のウェブデザインのトレンドは、2012年のトレンドを伴いつつ、新しいエッセンスが加わりました。スマフォの普及、Windows8の登場に大きな影響を受けたトレンドもあります。 2013年も半分過ぎ、この半年によく見かけたトレンドをまとめたインフォグラフィックを紹介します。
2013年この半年によく見かけたウェブデザインのトレンドをまとめたインフォグラフィック
2013年のウェブデザインのトレンドは、2012年のトレンドを伴いつつ、新しいエッセンスが加わりました。スマフォの普及、Windows8の登場に大きな影響を受けたトレンドもあります。 2013年も半分過ぎ、この半年によく見かけたトレンドをまとめたインフォグラフィックを紹介します。
[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。 モーダルウインドウのエフェクト19種類 アニメーションgifにして紹介しようと思ったけど、ちょっと重すぎるので断念。 どれもかっこいいのですが、オススメは下記でしょうか。 Fade in & Scale フェードで拡大しながら表示 Fall 縮小しながら集まるように表示 Sticky Up 上から張り付くように表示 3D Flip(Horizontal) 水平にくるっと回転して表示 Just Me 全画面に表示 Slit 真ん中に筋をいれ
ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！
はい高いですか？こんなもんですか？以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
Firefox 22 が正式リリース CSS Flexible Box の有効化、data、time 要素のサポートなど
Firefox 22 が正式リリース CSS Flexible Box の有効化、data、time 要素のサポートなど Firefox 22 が正式にリリースされ、HTML5 関連では、data 要素、time 要素への対応、CSS3 では Flexible Box の有効化などが行われました。 6月 25日、日本だと同日深夜ですが、Firefox の最新版、Firefox 22 が正式リリースされました。さっき自動更新の方もきたので紹介。 仕様変更で色々あった CSS Flexible Box は、Firefox 18 からデフォルト無効なものの実装はされていましたが、今回の Firefox 22 からデフォルトで有効化されました。 HTML5 関連では、data 要素、time 要素への対応、input 要素の、type="range" のサポート。JavaScript 関連で、新
2013年6月26日 管理人のブックマーク:phpspot開発日誌
2013年6月26日の気になったページ集です 【特報】DeNA、「comm」事業を縮小へ：日経ビジネスオンライン http://business.nikkeibp.co.jp/article/topics/20130625/250184/ Internet Explorer 11の新機能とか - ういはるかぜの化学 - subtech http://subtech.g.hatena.ne.jp/mayuki/20130625/1372173176 CSS3で実現するアローアイコン - to-R http://blog.webcreativepark.net/2013/06/25-234149.html Twitter API1.1の変更内容を冷静に見たら、もうヘビーユーザーは公式クライアントを使うしかないと思った | アイデアハッカー http://ideahacker.net/2013/
WordPressのリアルな工数と見積もりの話をしようじゃないか！
・・・・・・・・・・・はっ！？ 失礼しました、WP−Dクリアです。 染谷センセーの「ブログ飯」がやっとAmazonから届いてすっかり読みふけってしましました。 今回はWordPressとリアルなお見積もりの話 多くの WEB制作会社・WEB系フリーランサーはクライアントのサイトを作ってその制作料金が自らの収益となりますね。 本来、「作業工数に見合った」お金を頂くことが当たり前のはずなのに、いざフタを開けて作業に取りかかると 「作業工数が思ったよりあって、すっかり赤字！！」 なんてことが少なくありません。 そんな訳で、 WordPress及びWEB制作時のちょっとリアルなお見積もり のお話をしたいと思います。 （まあ、偉そうなこと言って実際自分も作業工数と見合ってないことなんてよくあるんだけど） WordPress界と深い関わりのある謎のお友達を招集したよ 自分も見積もりの話もしっかりしたい
モバイルファーストなCSSフレームワーク・「Cardinal」 - かちびと.net
CardinalはモバイルファーストなCSSフレームワークです。必要最低限の設計で残りはユーザーがカスタマイズする、という事を念頭に置いて作られたようです。この手のフレームワークは数多に存在しますが、選択肢が大いに越した事はありませんね。 Cardinal
好きなアイコンだけ選んでアイコンフォントにできる「Fontastic」:phpspot開発日誌
Create Your Icon Fonts - Fontastic 好きなアイコンだけ選んでアイコンフォントにできる「Fontastic」。 元々沢山のアイコンが用意されている上に自分でSVG形式のアイコンをアップすれば好みのアイコンを追加することも出来ます zip形式でフォントとCSSがセットになったものがDL出来るので簡単に使えます。 アイコンフォントには使わないものも入っていてもったいない、という方はこのツールで使うものだけのアイコンフォントが作れますね 関連エントリ 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 汎用で使えそうなフリーのアイコンフォント「Genericons」 アイコン画像をアップして独自のアイコンフォントがブラウザ上で作れる「Iconvau.lt」 ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」
要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」:phpspot開発日誌
Hover Captions (HCaptions.js) 要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」 画像等にカーソルを合わせるとCaptionが出る、というのをカッコよく実現できるプラグインです。 キャプションの上にボタンなんかも表示できて、編集画面等でつかえそうです アニメーションが色々とカスタマイズでえらべるのでサイトの特徴に併せて動きを調整できます 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなアナログ時
期間限定無料！約50,000円分の高品質なウェブ用の有料素材・フォントがダウンロードできますよ
日本時間29日の夜まで限定で、$499分、日本円で約50,000円分の有料のウェブ用の素材やフォント計471種類が無料でダウンロードできるので、紹介します。 ※為替の変動が激しいので、これを書いている現在$499は48,432円です。 使い道が限定されたような素材なんでしょ？と思う人もいるかもしれませんが、いやいやこれがなかなかの素材が揃っていました。 素材の提供元は、下記のサイトやクリエイティブ集団です。 素材の提供元 当ブログでも紹介したことのあるDesignModo, sitepoint, vandelayなども含まれています。 ダウンロードしたので素材をキャプチャで紹介する、、、前に、ダウンロード方法から紹介します。 素材のダウンロード ダウンロードは、下記サイトにアクセスします。
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
2013年6月25日 管理人のブックマーク:phpspot開発日誌
2013年6月25日の気になったページ集です Objective-Cを絶対書きたくない人向けのiOSアプリ開発ソリューションの総括 - laiso http://d.hatena.ne.jp/laiso+iphone/20130624/1372093093 LINE、comm、Skype、無料通話サービスの実力を測定 - 第2回 音声品質は？ LINE、comm、Skypeを検証：ITpro http://itpro.nikkeibp.co.jp/article/COLUMN/20130619/486267/ タブレット端末出荷 約２倍に NHKニュース http://www3.nhk.or.jp/news/html/20130625/k10015554191000.html マイクロソフト、他社スマホにゲーム配信 iPhoneなど ：日本経済新聞 http://www.nikkei.co
WebAudioAPIを使ってシンセサイザーを作るチュートリアル:phpspot開発日誌
Web Audio Stylophone | Codrops WebAudioAPIを使ってシンセサイザーを作るチュートリアル。 次のようにマウスやキーボードで操作できるWEBベースのシンセサイザーが作れます。 なかなか面白いデモなので、こういうことができるのか、という確認の意味で見ておいてもよさそうです。 関連エントリ HTML5を使った超クールなフリーのWordPressテーマ集35 WebCamで撮影をHTML5で実現するデモ 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 フリーでHTML5ベースのリッチな管理画面テンプレート
ウェブデザインにおけるカラーのグリーンの重要性と効果的な使い方 -Eco Friendly Green
ウェブデザインにおけるカラーのグリーンの重要性を学び、実例を見ながら制作における効果的な使い方や気をつけたいポイントを紹介します。 Anatomy of Colors: How to Create Eco-Friendly Green Website Anatomy of Colorsのシリーズは前回、ホワイトを紹介しました。 ウェブデザインにおけるカラーのホワイトの重要性と効果的な使い方・気をつけたい4つのポイント 最近はデスクトップの壁紙もベタ塗りグリーンなので、今回はグリーンを紹介します。 以下、グリーンの各ポイントを意訳したものです。 グリーンの重要性 グリーンの基礎知識 ウェブデザインにおけるグリーンの使い方 グリーンを使うことの意味 グリーンの文化的な背景 さまざまなグリーンの使い方 グリーンを使ってみよう グリーンの重要性 インスピレーションを与える最もよい情報提供元は何です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
オープンソースのGithubクローン・「GitPrep」 - かちびと.net
新着記事
PHP,Ruby,Node.js等のサーバサイドのデバッグをChrome上で行える「Chrome Logger」:phpspot開発日誌
新着記事
