タグ

webdesignに関するkirifueのブックマーク (368)

  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
    kirifue
    kirifue 2012/11/14
    惚れぼれするとにかくカッコイイ企業ホームページ。シンプルなのが好きだな。 #開発
  • フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ(EFO) | バシャログ。

    世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない・・・って事は結構多いのではないしょうか? 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。

    フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ(EFO) | バシャログ。
    kirifue
    kirifue 2012/11/14
    エントリーフォーム最適化のまとめ。 #開発
  • 1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個!

    HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営WebサービスHTML5エンジニアをやっているものです。 よろしくお願いします! 「HTMLファイ部」創立1周年! 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ!・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます! ツール系のサイト

    kirifue
    kirifue 2012/11/14
    1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個。iOSシミュレータもね。 #開発 #iphonejp
  • [JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation

    ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na

    kirifue
    kirifue 2012/11/14
    階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション「Stairway Navigation」。 #開発
  • [CSS]コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ

    HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

    kirifue
    kirifue 2012/11/09
    コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ。 #開発 #デザイン
  • Web制作するときに探す素材サイト&参考にするサイトまとめ | ナナメウエBlog

    はじめまして ナナメウエデザイナーのはっち(@hacching)です。 さて、今日は私がWeb制作をするときにチェックしているサイト一覧をまとめてみました。 自分の備忘録でもあります〜。 是非参考にしてくださいね(*’-'*) フリー写真素材サイトさん Webデザインする際に必ず必要になる写真素材。 有料素材はクオリティは高いですがお値段も高い〜。 そんなあなたに、ありがとうフリー写真素材! 写真素材 – フォトライブラリー 無料会員登録しておけば、1日に数枚(何枚だっけ)限定ですが、無料素材がDLできます。 商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイング 完全無料の写真・Web素材(バナー、オブジェクトなど)素材サイトです。コンテストの実施など、ユーザーの参加型企画も豊富!シーズンにあわせた特集も魅力です。 PAKUTASO/ぱくたそ-WEB

    kirifue
    kirifue 2012/10/30
    Web制作するときに探す素材サイト&参考にするサイトまとめ。 #開発 #デザイン
  • 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 (#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/) @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
    kirifue
    kirifue 2012/10/30
    少ない手間と知識でそれなりに見せる、デザインテクニック。なんかいろいろとズルいw #開発 #デザイン
  • スマホ向けサイト制作3手法の基礎知識と課題、OS/機種依存のハマリどころ3選

    スマホ向けサイト制作3手法の基礎知識と課題、OS/機種依存のハマリどころ3選:スマホ向けサイト制作で泣かないための秘伝ノウハウ(1)(1/2 ページ) スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。第1回は、PCやケータイと比べて際立ったスマホの特徴2つや、スマホ向けサイト制作3手法の基礎知識と課題、iPhoneAndroidなどOS/機種依存でのハマリどころをサンプルを交えて3つ紹介 連載開始に当たって 初めまして。KSKの「フレックスファームビジネスユニット」でエバンジェリストをしている渡辺と申します。筆者の所属するフレックスファームでは、スマートフォン向けWebサイト構築支援ツールの開発・販売を行っています。国内で販売されて

    スマホ向けサイト制作3手法の基礎知識と課題、OS/機種依存のハマリどころ3選
    kirifue
    kirifue 2012/10/24
    スマホ向けサイト制作3手法の基礎知識と課題、OS/機種依存のハマリどころ3選。 #開発 #iphone #android
  • cmmntr.com

    This domain may be for sale!

    kirifue
    kirifue 2012/10/16
    国内のレスポンシブWebデザインを採用したイマドキのWebサイトまとめ15個。見た目はシンプルが好きかも。 #開発 #デザイン
  • ウェブ制作者に必ず役立つ!iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ

    ウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。 順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。 HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。

    kirifue
    kirifue 2012/10/15
    ウェブ制作者に必ず役立つ!iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ。英語だけどな。 #開発 #デザイン
  • なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー

    今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」! 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは当にすごい!! まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ

    なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー
    kirifue
    kirifue 2012/10/15
    「jQuery Masonry」プラグインを使ってんのか。「NHKスタジオパーク」のレスポンシブ・ウェブデザイン、かっこよすぎ〜。 #開発 #デザイン
  • WEB屋にとって便利なジェネレーター色々!最近のオススメも、昔から使ってきた物もまとめてご紹介! | バンクーバーのうぇぶ屋

    WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ

    WEB屋にとって便利なジェネレーター色々!最近のオススメも、昔から使ってきた物もまとめてご紹介! | バンクーバーのうぇぶ屋
    kirifue
    kirifue 2012/10/11
    WEB屋にとって便利なジェネレーターまとめ。 #開発
  • 100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ

    こんにちは、ウェブサービス部の宮澤です。私は現在、自社コンテンツ内で自社のサービスをPRするため自社広告の管理を担当しています。 NHN Japanには数多くのサービスが存在するため、常時20〜30の自社広告が運用されています。自社広告は細かく効果測定を行うことが可能なので、毎週5〜10のバナーを入れ替えながら最適化を図ったところ、コンバージョン率、クリック率など、ほぼすべての指標で広告効果が向上しました。 自社広告の掲載メディアに関しても、livedoor、livedoorニュース、livedoor Blog、NAVER まとめ、各種アプリと多岐にわたっており、今では新規ユーザー獲得のための重要施策の一つとなっています。 今回は100種類以上の自社広告を制作、運用してみてわかった、効果の高い広告クリエイティブを作るためのコツをご紹介します。 1. 笑顔 VS 泣き顔 まずはLINEの自

    100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ
    kirifue
    kirifue 2012/10/05
    バナー広告クリエイティブ4つの基本。ま、直感でイケ。 #デザイン
  • Webパフォーマンス ベストプラクティス - Make the Web Faster

    Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳:@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する(たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう)。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー

    kirifue
    kirifue 2012/10/04
    Webパフォーマンス ベストプラクティス(翻訳版)。 #開発
  • JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法

    [対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です(まだ読んでない人はぜひ読んでください!)。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb(ジョイディープ・デブ)氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化

    JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
    kirifue
    kirifue 2012/10/04
    JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法。 #開発
  • Loading...

    Loading...
    kirifue
    kirifue 2012/10/02
    「タッチジェスチャー」を意識したUIデザインのまとめ。カッコイイけど、情報を読み取りにくいのが多い印象。 #デザイン
  • 【2012超まとめ】確実にWEBサービスを作りたい人へ【前編】

    (記事が長すぎたので前編・中編・後編に分けました) 僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービスを公開しました。 きっかけになったのはこの記事です。 自分でWEBサービスを作りたいと思っている人へ http://anond.hatelabo.jp/20101203150748 こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。 たった2日で製作されたWebサービス「お部屋晒し」って? http://matome.naver.jp/odai/2131952812556433001 WEBサイトを発注してみた。 http://anond.hatelabo.jp/20120318122617 Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300 http://d.hatena.ne.jp/inouet

    【2012超まとめ】確実にWEBサービスを作りたい人へ【前編】
    kirifue
    kirifue 2012/09/28
    確実にWEBサービスを作りたい人へ【前編】。先日の家入さんの折れずに挑戦を続ける姿を見てモチベーションも高まり…>何がキッカケになるか分からんな。 #開発
  • 要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話

    2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。(ミスなどの指摘は @lowply までお願いします) もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2

    要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
    kirifue
    kirifue 2012/09/26
    Apple iPhone5のページのビデオの実装がスゲエ。1MBに収まる2枚のJPG画像をJavaScriptで高速に差し替えてcanvasタグ内に描画しとる。 #applejp #デザイン
  • スマホサイトに入れると使いやすくなる!おすすめjQuery4選! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ

    スマホサイトに入れると使いやすくなる!おすすめjQuery4選! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    kirifue
    kirifue 2012/09/22
    iPhoneやAndroid等、スマホサイトに入れると使いやすくなる、おすすめjQuery4選! #iphonejp #androidjp #開発
  • 商用利用無料、むしろ奨励、ピクセルベースのシンプルなデザインのアイコン素材 -Modern UI Icons

    ブログやウェブサイト・アプリでよく使用するものをはじめ、アプリ、チャート、天気、文具、ホビー、顔文字なども揃っているWindows Phoneをテーマに作成したアイコン素材を紹介します。

    kirifue
    kirifue 2012/09/12
    商用利用無料、むしろ奨励、ピクセルベースのシンプルなデザインのアイコン素材。 #開発