サイト作成に欠かせないサイトやサービスなどを20個｜Webpark
私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日本を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
写真を使用してデザインをするためのベストプラクティス
写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方
ウェブサイトをより単純にして、分かりやすくする -Design Simplicity
ユーザーがより簡単にインフォメーションにアクセスできるように、ウェブサイトをより単純にして分かりやすくする「Design Simplicity」を取り入れる方法をWeb Designer Wallから紹介します。 What to Expect in 2010: UX/UI Design Simplicity 下記は各ポイントを意訳したものです。 はじめに 今年も多くのデザイントレンドがあります。しかしながら、私はデザインの単純さ（Design Simplicity）にフォーカスをあわせることが重要であると感じます。 デザインの単純さとは、より少ないページ、より少ないクリック、より少ない取り散らかし、そして多くのホワイトスペースを意味します。そして、我々のユーザーはそれを求めています。 増加するインフォメーションへのアクセスは、ユーザーの集中力低下の原因となります。デザイナーは今まで以上にユ
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
2009年9月第3週号 1位は、ブログのトップページで記事をどう見せるか／気になるネタは、Google、記事の“高速閲覧”を可能にする「Fast Flip」立ち上げ | gihyo.jp
週刊Webテク通信 2009年9月第3週号1位は、ブログのトップページで記事をどう見せるか／気になるネタは、Google、記事の“高速閲覧”を可能にする「Fast Flip」立ち上げ ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年9月14日～9月20日の間に見つけた記事のベスト5です。 今週のWebテク記事ベスト5 1. How to Display Your Content on a Blog’s Front Page | Webdesigner Depot http://www.webdesignerdepot.com/2009/09/how-to-display-your-content-on-a-blogs-front-page/ ブログのトップページに、記事への誘導をど
Portfolio Design Study: Design Patterns and Current Practices « Smashing Magazine
In our recent study on Typographic Design Patterns and Best Practices, we asked our readers about case studies they would like us to conduct. One of the most popular suggestions was a detailed case study of portfolio websites. Following the requests of our readers, we have carefully selected 55 design agencies and Web development agencies, analyzed their portfolio websites and identified popular d
The Principles of Good Web Design Part 1: Layout | Tom Kenny Design
This is the first part in this series of The Principles of Good Web Design. The other parts are listed below: The Principles of Good Web Design Part 2: Navigation The Principles of Good Web Design Part 3: Colour The Principles of Good Web Design Part 4: Content Good web design doesn’t just appear out of nowhere, there are many aspects of design that come together to achieve this. The first one tha
「アクセスできること」がアクセシビリティ、それを忘れてはいませんか? | ゴミ箱の中の雑記帳
日々の出来事やその感想、くだらない (かもしれない) 衝動買いの顛末、主にICT関連の個人的なメモなど、およそ他人の役には立たないであろうことをつらつらと書き散らかしています。 アックゼロヨン・アワードという、Webサイトを表彰するアワードがある。このアワードのホームページにアクセスすると、「年齢や性別、障害の有無、ITリテラシの高低に関わらず、誰にとっても使いやすいウェブサイトを表彰します。」というaltがついた画像がある。これだけを見るとアクセシビリティやユーザビリティだけが評価対象のアワードのように感じられるが、同アワードの審査のページに示されている評価軸には、「デザイン表現」や「アイディア」という項目も含まれているので、決してアクセシビリティやユーザビリティだけが評価されるアワードではない。僕自身も前回まで審査員の一人として関わっていたが、アクセシビリティのことを気にする人にとって
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」 終了いたしました - WebSig24/7公式ブログ
posted on 2009.09.01 2:04 2 trackbacks 代表の和田です。 第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」が盛況の後終了いたしました。当日ご参加頂いた皆さん、オンラインでご参加いたした皆さんありがとうございました。 また、マイクトラブルで開始が遅れた件、聞きにくい点があり申し訳ありませんでした。 当日資料とグループワークで発表して頂いたサイトマップは準備が整い次第、こちらで順次公開していきます。 ■変更履歴 ○9月1日：進行資料公開 今回は、WebSig初のスピーカー無し、かつ、まだ明確な答えが無い事へのチャレンジということで、モデレーターでもぎりぎりまで会議設計に悩み、皆さんから事前に頂いた課題を整理していきました。 なるべく頂いた課題を拾おうとするあまり、ちょっと盛りだくさんとなり消化不良気味なところもあったかと思い
2009年7月第5週号 1位は、「カートに入れる」ボタンのショーケース／気になるネタは、iPhoneに直接付けられるストラップがいろいろ登場 | gihyo.jp
週刊Webテク通信 2009年7月第5週号1位は、「カートに入れる」ボタンのショーケース／気になるネタは、iPhoneに直接付けられるストラップがいろいろ登場 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年7月27日～8月2日の間に見つけた記事のベスト5です。 1. “Add to Cart” Button Showcase | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/add-to-cart/ ECサイトの「カートに入れる」ボタンのショーケースです。カートに追加するということで「+」の記号を使うケースが多いようです。 「Cart」ではなく「Bag」という表記のものも結構あります。でも、紙袋（ショッピ
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集:phpspot開発日誌
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
50 Best Website Interface Photoshop Tutorials
Photoshop is a great tool for designing a website but it is also very complicated. There are always new design trends and techniques emerging. However, thanks to the generous designers who share their techniques online, you can easily brush up your Photoshop skills with some helpful tutorials. Doesn’t matter if you are looking to create a portfolio website, corporate theme, web page templates or a
ウェブデザインのタブーをあえて破ってみるための10のTips
ウェブデザインにいつもと違うアイデアを入れてみるための10のTipsをWeb Designer Depotから紹介します。 10 Web Design Rules That You Can Break 下記、各ポイントをピックアップしてお届けします。 はじめに 1. 水平方向のスクロールバーを表示しない 2. フォントの書体は必要最小限の数だけ使用する 3. やたらと多くのカラーを使用しない 4. サイトのゴールを明白にする 5. ナビゲーションは理解しやすいものにする 6. テキストと背景には異なるカラーを使用する 7. コンテンツにはアニメーションを配置しない 8. ウェブ セーフ フォントを使用する 9. スプラッシュ（ランディング）ページを使用しない 10. tableは使用しない はじめに ウェブデザインの進化は、一貫した有用なデザインの保証とともに確立されてきました。そして、あ
ベア速 やる夫がＷＥＢデザイナーになるようです
3 名前：以下、名無しにかわりましてVIPがお送りします。[] 投稿日：2008/01/12(土) 03:03:00.97 ID:iSiNomjo0 【８年前某日】 ＿＿＿_ ／ ＼ ／ ─ ─＼ ソースコードかけるしいけるかな？ ／ （●） （●） ＼ どれ、求人雑誌に載ってるし応募してみるか。 | （__人__） | ＿＿＿＿＿＿＿_ ＼ ｀ ⌒´ ,／ .| | | ノ ＼ | | | ／´ | | | | ｌ | | | ヽ -一ー_~､⌒)^),-､ | |_＿＿＿＿＿＿__| ヽ ＿＿＿＿,ノγ⌒ヽ)ニニ-￣ | | | ※８年前の黎明期であ
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? — Smashing Magazine
The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a su
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blogging.from.tv/wp/2009/11/11/2884
The 960 Grid System Toolbox & Resources
