タグ

WEB制作に関するyananakiのブックマーク (243)

  • Remove unused CSS - CSS Optimizer

    On average, about 35% of CSS code is completely unnecessary. We meticulously find and remove this unnecessary CSS code.

    Remove unused CSS - CSS Optimizer
    yananaki
    yananaki 2011/01/11
    「Remove unused CSS - CSS Optimizer」 URLを入力すると、そのサイトで使われていないCSS設定があるかどうか教えてくれるサービス。大きいサイトだと時間もかかるけど、無駄を省いたCSSも作ってくれるし便利かも。
  • デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

    このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古いですが、とっても素晴らしいで今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ

    yananaki
    yananaki 2011/01/11
    「デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則」 近接は結構みんな気づくけど、自分でやるとできてない人が多いかも。プロジェクトのパネルとか、参考にすると良いよね。
  • 就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス

    2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します! ↑私が10年以上利用している会計ソフト! 最新版書きました!こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう!2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか?何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記

    就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
  • 2010年総まとめ:CSSの実用的なテクニック集

    CSS3で何ができるの? という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。

  • 年末年始にWebデザインを学び直すための3つのステップ

    この記事は、以下のような方を対象にしています。 現在Webデザイン仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く

    年末年始にWebデザインを学び直すための3つのステップ
    yananaki
    yananaki 2011/01/06
    「年末年始にWebデザインを学び直すための3つのステップ :: Stocker.jp / diary」 そういえば手書きでラフスケッチ、研修の時にやったなぁ。モノはスケッチするけど、サイトはあんまりしてなかったな。やってみよう。
  • ユーザーの視線を誘導する3つのユーザビリティ改善方法

    webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 1)全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 1)サービスに対して興味を少しだけ持ってもらう情報を書く 2)サービス開始はちょっと・・・という人のためにクリックしやすいリン

    ユーザーの視線を誘導する3つのユーザビリティ改善方法
    yananaki
    yananaki 2011/01/06
    「ユーザーの視線を誘導する3つのユーザビリティ改善方法*ホームページを作る人のネタ帳」 右メニューの人物写真は、ユーザーの視点を散らす効果があるんだって。なるほどー。
  • Web屋さんのための新年の抱負アイデア24

    2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方!今年の目標はもう設定しましたか?私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう?ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう? ↑私が10年以上利用している会計ソフト! 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする

    Web屋さんのための新年の抱負アイデア24
    yananaki
    yananaki 2011/01/06
    「Web屋さんのための新年の抱負アイデア24 | Webクリエイターボックス」 なぜばれたし。やってみたいことは大抵ここに載ってた。もっとたくさん動こう。頑張ろう。
  • 今年はWebサービスを作りたいと思っている人にお勧めのエントリーまとめ | ロプログ

    明けましておめでとうございます! 近年、個人でWebサービスを開発するのが流行っていますね。「今年こそは俺もWebサービスを作ってモテモテになるぜ!」と思っている人も多いのではないでしょうか。 そんな人のために、Webサービスを開発・運営するにあたっての心構えやノウハウ、体験談などの書かれたエントリーを集めてみました。 ▼誠 Biz.ID:田口元の「ひとりで作るネットサービス」探訪 個人でWebサービスを開発している人たちのインタビュー集。ヒットしたサービスを手がけた個人開発者達のバックグランドや考え方を垣間見ることができ、モチベーションアップにもなります。恥ずかしながら、私のインタビューも載っています。 ▼Web2.0ナビ: 個人サービスを作るコツ 個人がWebサービスを作るための、実践的な8つのコツが書かれています。 ▼個人でネットサービスを運営するための5つのコツ(momose版):

    今年はWebサービスを作りたいと思っている人にお勧めのエントリーまとめ | ロプログ
    yananaki
    yananaki 2011/01/06
    「今年はWebサービスを作りたいと思っている人にお勧めのエントリーまとめ | ロプログ」 Webサービス作らなくても面白い記事ばかり。今年は「脱・やるやる詐欺」したい…
  • Webデザインやプログラミングなどの勉強に良さそうな国内のブログ記事やWebサイトいろいろ - かちびと.net

    いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ 以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ 5分でわかる Ruby を知らない人が Ruby

    Webデザインやプログラミングなどの勉強に良さそうな国内のブログ記事やWebサイトいろいろ - かちびと.net
  • 2010年総まとめ:ウェブ制作に役立つエントリーBest 20

    コリス [ad#ad-2] 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed Twitterでは、サイトに掲載していないウェブ関連の話題、クリエイティブなもの、面白いものを数多く紹介しています。 Twitter@colisscom 2010年、ブックマークが多かったエントリー 漢字も使える手書き風の日フォントのまとめ ウェブサイトのパフォーマンス改善やセキュリティに役立つ.htaccessの設定 2010年総まとめ:商用利用も無料、日語・英語の高品質なフリーフォント集 jQueryの日語の解説サイトと国産のプラグイン集 たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法 商用でも無料で利用できる高級感のある細字のフォント集 無駄なdiv要素やc

  • index.php?search=flowers

    Also visit our sister site Templateswise.com and start creating presentations faster with free PowerPoint templates! Background Labs share a wide variety of free patterns, website backgrounds, vector graphics, textures and design resources for everyone. Browse colors and styles, we have fresh resources and inspirational art for all your needs!

  • Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

    私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトやを見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな

    Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
    yananaki
    yananaki 2010/12/21
    「Webデザイナーな私の勉強方法まとめ」 すごく刺激になる記事。そろそろWordpressをすんなり使えるように勉強したい。
  • 日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式

    Photoshopのチュートリアルというと英語が多いですが、日語の方がサクサク読める(私の場合)ので、日語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基的な光の作り方2 基的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ

    yananaki
    yananaki 2010/12/20
    「日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式」 これ助かるかも。英語でも読めないことないんだけど、ツール名の微妙な違いとかを把握してないと時間かかっちゃうからなぁ・・・
  • divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな

    はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追

    yananaki
    yananaki 2010/12/13
    「divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな」 これはひどいwww新しい額縁かと思ったwwwいくらDWでも、こんなにdivを入れるなんて面倒だろうに…
  • ※追加・修正 IT関係やWebデザイナーは絶対に読むべきブログ・サイト

    サイトやブログ作り・デザインを考えている時に参考になる記事や影響力の大きいブログやサイトをまとめてみました。 IT関係やデザイナーは絶対に読むべきブログ・サイト 僕も多分、皆さんもお世話になっている方も多いと思いますが 改めて、僕がよく参考にしたり、楽しませてもらったりしているブログやサイトをまとめてみました。 2つのブログを追加させてもらいました。 「ホームページを作る人のネタ帳」さん jQueryやWebデザインと様々な幅の広い話題で毎日を飽きさせてくれないブログです。 なにより、多くの人から愛されているブログだと感じます。 「photoshop vip」 Photoshopのチュートリアルなどを豊富に紹介しています。 Webデザイナー関係の人は、ぜひ見ましょう。 「コリス」さん フリーな素材からJavascriptCSSなど紹介しています。 更新頻度ま高いので必見です!!! 「We

    yananaki
    yananaki 2010/12/09
    「IT関係やデザイナーは絶対に読むべきブログ・サイト @ THE GREMLIN」 IT関係というよりも、web制作関係の人にオススメかな。全部RSSリーダー登録してたのでこっそり「よっしゃ!」と思った^^
  • アフィリエイトでとりあえず月間数千円程度の収入を得る方法 - とりあえず9JP?

    まず、サイトが無いとアフィリエイトを始める事は出来ない。 サイト、といっても…。 最近ではウェブサイトより、ブログの方がアクセスを稼ぎやすい気がするので、ブログを作成しよう。 無料でアフィリエイト目的でブログを始めるなら、FC2ブログや、Seesaaブログなどがお勧め。 多少のお金をかけてでも自由にブログを作成したいなら、さくらインターネットやドメインキングなどで、レンタルサーバを借りてWordpressを設置しよう。 Wordpressにはアフィリエイトをする場合に便利なプラグインなどが多数公開されていて、実際に長く続けようと思った場合、レンタルブログより遥かに運用しやすい。 (ドメインキングなら、2010/11/6現在、独自ドメイン+サーバを最大1年間100円で利用可能。WordPressの自動インストール機能もある。) レンタルブログを借りる場合でも、レンタルサーバにブログソフトウェ

  • Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

    タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) <前へ 次へ>(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308

    yananaki
    yananaki 2010/12/08
    「Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト」 ブブンごとに見られるから便利かも
  • 2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net

    少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための

    2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
    yananaki
    yananaki 2010/12/08
    「2010年度版・とても参考になったWeb制作関連エントリーまとめ - かちびと.net」 大半が読んでたエントリーだったけど、忘れてるもの、活かしきれてないものが多いから復習する!
  • たった一行でclearfixを使わずにfloatを解除するテクニック|クロノドライブ

    floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。 HTML

    たった一行でclearfixを使わずにfloatを解除するテクニック|クロノドライブ
    yananaki
    yananaki 2010/12/01
    「たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~」 これってIEとか平気なんだっけ?将来的にも使えるなら試してみたい。
  • Whatcolor

    Welcome home Here you can save a list of your favorite colors. usage: http://whatcolor.heroku.com/cdc (short notation) http://whatcolor.heroku.com/ccddcc (extended notation) http://whatcolor.heroku.com/009246/fff/ce2b46 (italian flag) http://whatcolor.heroku.com/c/00f (complementary colors) http://whatcolor.heroku.com/c/00f/3 (triad colors) http://whatcolor.heroku.com/a/00f (analogous colors) http