タグ

Webデザインに関するitboyのブックマーク (133)

  • 写真を使用してデザインをするためのベストプラクティス

    写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方

  • 見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

    TOP デザイン一覧 グラデーション テキストのみ テキスト非画像 上線 下線 丸 四角 囲み線 斜線 未分類 点線 角丸 はてなブックマーク ツイートする シェアする 他のギャラリー ファビコンギャラリー フッターデザイン ウェブコレクション このサイトについて いろんなWEBサイトの見出し部分を集めました。デザインの参考に。掲載サイトがリニューアルした場合はご紹介の見出しが使用されていない場合があります。 連絡先:manage.hp+midashi@gmail.com copyright © midashi-design.com All Rights Reserved.

    見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
    itboy
    itboy 2010/09/01
    これまたニッチな・・・
  • 最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai (リクリ)

    【2024年8月】レンタルサーバーおすすめ10社を徹底比較! 人気ランキングも PR 最終更新日:2024年08月16日

  • Firebugの使い方 | THE HAM MEDIA

    Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

    Firebugの使い方 | THE HAM MEDIA
  • 「ルール」を打ち破るWebデザイン

    2017年6月29日 Webデザイン Webデザインの「ルール」。そのいくつかを聞いたことがあると思います。でも「やってはいけない」「やらなければいけない」なんて聞いたら壊したくなるのが人間というもの(私だけ?)。今回はそんなWebデザインのルールを打ち破る素敵なサイトをNoupeで紹介されていたので翻訳してみます。次回のWebデザインの参考にしてみてください。 ↑私が10年以上利用している会計ソフト! Webデザインの「ルール」に関する記事を見た事があると思います。事実、いやになるほど頭にインプットされている事でしょう。そして多くの場合その「ルール」は楽に生活を送るためのガイドラインとして役立っています。 しかし、あなたのアイデアがそのルールに当てはまらない場合、またはあなたがとにかく全てを型に当てはめるのにうんざりして、自分の創造力に挑戦したい場合はどうでしょう?そのルールは当に変更

    「ルール」を打ち破るWebデザイン
  • 画像に使用されているフォントの名前が分かるオンラインサービス -What Font is

    調べたいフォントがある画像をアップロードします。ファイルはローカルでもオンライン上でも対応しています。 上記は、手元にあるローカルファイルを「Browse」ボタンで参照し、「Continue」ボタンをクリックします。 Step 2

  • ワイヤフレームは必要か,不要か

    原文(投稿日:2010/06/01)へのリンク “百聞は一見にしかず” ということわざは,アジャイルの世界では時に忘れられているが,少なくとも設計者の多くはそれを信じている。あるチームでは 設計作業を小ステップで進めるように設計者に求めている が,そのプロセスは必ずしも最高の結果を生み出してはいない。また別のチームでは ワイヤフレームが官僚主義と受け取られていて,効率的開発の妨げになっている。 Booshtukka 氏は,現在の状況で 設計者がアジャイルのやり方を批判をするのは容易ではない,と指摘する。そのプロセスでは,くつべらの設計者にさえ漸進的設計の実行が求められる。それが創造性の発揮を困難にしているのだ。 おかしな話ですね – 設計はそれ自体,総体的な創作活動なのですから。家の絵を描く作業を想像してみてください。ただし,部分ごとに描くのです。最初に煙突。それから窓辺の植木箱。背後にあ

    ワイヤフレームは必要か,不要か
  • jQueryとPHPで作るサムネイルがスライドするギャラリー – creamu

    サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと

  • ブログをダメにする20の過ち | ブログヘラルド

    ブログを用いて成功を収めたいならば、今すぐにブログのデザインおよび設定について考える必要がある。要するに、ブログの構成によっては、最高のブログを構築する機会を奪ってしまうこともあると言うことだ。 その点を念頭に置いて、最も簡単、そして、最もありふれた、ブログを台無しにする以下の20の要素を見ていってもらいたい。そして、ぜひ回避してもらいたい。 広告が多すぎる 眩しすぎる、もしくは明るすぎて読みずらい ポップアップ広告 – 今すぐ撤去しよう! 大量のキーワード – サイドバーやフッターにキーワードを詰め込んでも誰も騙されない。 乱雑 – どれがコンテンツだか分からない。 コンテンツ狩り – オリジナルの作品を提供しよう。他人のブログやサイトのコンテンツをコピーするだけでは物足りない。 過剰な量のテキスト – テキストの膨大なブロックは読みづらい。 フォーマットが不十分 – 落ち着かないサイド

  • Googleの新しいデザインが嫌われる理由

    Googleが検索サイトの新たなデザインを立ち上げた。以前のバージョンとの大きな違いは、左のサイドバーに便利なリンクが設置された点だ。この部分には、画像検索や動画検索などのオプションが表示される。外観にも幾つか変更が加えられた。 だが、Webユーザーがこの新デザインを気に入るかどうかは分からない。確かに新しくなったし、多くの人はこういうアップデートを喜ぶだろうが、今回の変更はかなり大きい。幾つかの点では、ユーザーは新しいデザインにとまどうかもしれない。とは言え、検索結果は同じであり、これはGoogleが市場シェアを維持する一助になるはずだ。しかし一部の人には、Googleのサービスを使うのに二の足を踏みかねないような成長の痛みもあるだろう。 Googleの新しいデザインを初めて使ったときに、ユーザーが気に入らないと思うであろう理由を以下に挙げる。 1. 前とあまりに違う Google検索ユ

    Googleの新しいデザインが嫌われる理由
  • 画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

    昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました! 今回作成したのは日人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品! CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対

    画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD
  • Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

    2013年3月23日 Webサイト制作, 便利ツール Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派!」という人のためのPDFテンプレートを紹介します。 ↑私が10年以上利用している会計ソフト! オンラインで使えるワイヤーフレーム作成ツール iPlotz iPlotzのWebサイト とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。 トライアルをするにはまずトップページから「Get S

    Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
  • 配色センスに自信がなくても綺麗なサイトをつくる方法 | nanapi[ナナピ]

    配色センスに自信がなくても綺麗なサイトをつくる方法 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。配色はセンスではない! よく「私は色のセンスがないから…」などという言葉を聞きますが、 配色には基となるセオリーがあり、知識として学ぶことができるものなのです。 よりよいWebデザインにするための配色のセオリー http://sweetlovexx.seesaa.net/article/90107619.html こちらにもいろいろ参考になる情報が盛りだくさんです。 書籍もいろいろあるのでamazonなどで検索してみてはいかがでしょうか。 「でも勉強とか面倒じゃないですか」 というひとでも大丈夫。 以下のサイトを使えば、なんとなくそれとなくカッコいい配色が手に入ります。 Color Scheme Designer 3 http:/

    itboy
    itboy 2010/04/22
    まぁ、自分にセンスがないってことを自覚して、思い切って配色をパクるのも一つの手ですよね・・・。
  • nanapiの初期バージョンに検索窓がなかった理由 : けんすう日記

    はじめに 【仕事における80:20の法則】個人・企業のパフォーマンスを最大限に高める方法 | [b] bizMode|世界のデジタルトレンドを読む というブログの中で nanapiというレシピサイトがありますが、c/o時は全然機能がなく、レシピを探せませんでした。果たして、カットオーバー時点において、レシピ検索機能は備え付けておく必要があったのでしょうか?また、個人ページにも全く機能性はありませんでしたが、今はどうでしょう?十分パワーアップしています。 そこに、多くの問題が発生したでしょうか?していません。 少しの問題は発生していましたが、プロダクト価値を脅かすものではありません。 徹底的に80%にこだわり、重要なポイントは、十分に抑えられていたと思います。 こんな記事で紹介してもらったので、ちょっと書いてみます。記事内では、最初は検索結果に対しての工数をさかずにあとで回した、というニュア

  • https://jp.techcrunch.com/2010/04/07/20100406cacoo-lets-multiple-users-create-designs-collaboratively-and-in-real-time/

    https://jp.techcrunch.com/2010/04/07/20100406cacoo-lets-multiple-users-create-designs-collaboratively-and-in-real-time/
  • Harmony

    Procedural Drawing Tool

  • 20万個ものロゴをベクター形式でダウンロード

    600000+ logo png images, vector brand logos and logo templates!

    20万個ものロゴをベクター形式でダウンロード
  • ウェブデザインでこれは気をつけたいの35のポイント

    ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注: 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー

    ウェブデザインでこれは気をつけたいの35のポイント
  • JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]

    代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧

    JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
  • https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg