タグ

webデザインに関するkaionjiのブックマーク (60)

  • 海外Webサイト・海外Web屋の特徴

    2013年3月23日 Web関連記事, 海外情報 以前「日向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ?」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います! ↑私が10年以上利用している会計ソフト! 追記:ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ

    海外Webサイト・海外Web屋の特徴
  • 2011年2月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル

    先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい5つのこと(+番外編) – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得

  • 「ホームページを作る人のネタ帳」さんのリデザインをしました

    2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました!リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト! 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね

    「ホームページを作る人のネタ帳」さんのリデザインをしました
  • http://e0166nt.com/blog-entry-854.html

    http://e0166nt.com/blog-entry-854.html
  • 絶対見ておきたい有名企業のスマホサイトまとめ (1/5)

    この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日のスマホサイトは2年間でこんなに変わった iPhoneAndroidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

    絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
  • http://designaholic.cc/2011/02/post-82.html

    http://designaholic.cc/2011/02/post-82.html
  • テーマカラー1色をメインに用いたWebサイト50

    2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね! ↑私が10年以上利用している会計ソフト! 追記:リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても!Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ

    テーマカラー1色をメインに用いたWebサイト50
  • Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ|caraldo.net | WebとiPhoneとロードバイクが大好き!

  • フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

    はてブ ツイートする シェアする 他のギャラリー ファビコンギャラリー 見出しデザイン ウェブコレクション このサイトについて いろんなWEBサイトのフッター(ページ下部も含む)部分を集めました。デザインの参考に。掲載サイトがリニューアルした場合はご紹介のフッターが使用されていない場合があります。 連絡先:manage.hp+footer@gmail.com copyright © footer-design.com All Rights Reserved.

    フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
  • http://e0166nt.com/blog-entry-817.html

    http://e0166nt.com/blog-entry-817.html
  • スマートフォン用に毎回作る画像 - tikeda's blog

    スマートフォン用サービスを作る時に必要な画像を用意する際、よくサイズを忘れがちな為、社内用にドキュメントを最近まとめてました。内容が一般的なのでダイアリーにも書いておきます。Androidはひとくくりにするには、不明確な点も多いし、今後アップデートも多そうですが、参考までという事で。ちなみにファイルはPNG。 アプリケーションアイコン iPhoneAndroid - 3GSw57xh57 4w114xh114 w72xh72 ※2.0。割と細かいので以下参考 Icon Design Guidelines, Android 2.0 ヘッダー画像 iPhoneAndroid - 3GSw320xh44 4w640xh88 x1w480xh45 x2w960xh90 タブにのせるアイコン iPhoneAndroid - 3GSw40xh33 4w80xh66 ※selectedはauto eff

    スマートフォン用に毎回作る画像 - tikeda's blog
  • よくわかる!Adobe Creative Suite 3 Design Edition

    Pages 1 of 12 次のページ これまでの、デザイナーによるWebサイトのデザインは、多くの場合Adobe® Photoshop®でWebサイトのモデルを作成する作業でした。顧客によるデザインの承認を受けた後で、デザイナーは開発者やプログラマーにモデルを渡して、HTMLCSSを使用してデザインを再現してもらう必要がありました。 このドキュメントでは、Adobe® Dreamweaver® CS3とAdobe Photoshop CS3 Extendedを使用して、作成したWebデザインの仕上がりをより精密に調整する作業をデザイナー自身が行いながら、HTMLおよびCSSにコーディングする方法について手順を追って説明します。

  • http://e0166nt.com/blog-entry-807.html

    http://e0166nt.com/blog-entry-807.html
  • MdN Design|総合情報サイト

    「leigeber web development blog」で発表されているシンプルなスライドショー(www.scriptiny.com/2008/12/javascript-slideshow/)を実装してみよう。 [Click here to download the source.]をクリックしてダウンロードしたファイルを解凍し、「compressed.js」(JavaScript体)、「style.css」、「images」(ナビゲーション用画像)を使用。次に写真素材を準備する。一枚につき、それぞれ大きな写真とサムネールを用意しよう。サンプルでは、大きな写真の横位置が500×334ピクセル、縦位置が横幅成り行き×高さ334ピクセルとしてそろえた。サムネールは、高さ75ピクセルで横幅は成り行きとし、大きな写真は「photos」ディレクトリ、サムネールは「thumbnails」ディ

    MdN Design|総合情報サイト
  • 思わず押してみたくなる、いとも簡単なボタンの作り方 | 楽してプロっぽいデザイン | Forty-N-FiveBlog

    思わず押してみたくなるボタンってありますよね。細かい部分ですが、こういったボタンのデザインにもこだわっていきたいですね。そんな訳で、フォトショップで非常に簡単に思わず押してみたくなるボタンを作ってみましたので、その方法をメモしておきます。 思わず押してみたくなる、ボタンの作り方 角丸長方形ツールでボタンの大きさ・形を決めます レイヤーにドロップシャドウで効果をつけます まず、基準となる色を決めておきましょう。ここでは、青にしています。次にレイヤー様々な効果をつけていきます。まずはドロップシャドウから… 続いて、光彩(内側)で効果をつけます 続いて、グラデーションオーバーレイで効果をつけます 続いて、境界線で効果をつけます 色はボタンと同じような色にします。最後の仕上げ ポイントは2でしょうか!既に取っている選択範囲に、Altキーを押しながら新たに選択範囲を取ると、その部分の選択範囲が削除さ

  • allef.com - アクア(Aqua)風素材の作り方 -

    アクア(Aqua)風ボタンの作り方  Macでブーム(?)だったアクア風ボタンの作り方をいってみたいと思います。 自分なりに考えて作ったので、絶対的な作り方ではありません、ご了承ください。 今回使うパレットです。 ダウンロードして、Photoshopで開いて、画面の片隅に置いて、スポイトで吸う時に使います。 左端は黒、右端は白になっています。 完成予想図 それでは、順を追って説明させていただきます。1番からどうぞ。 1. ひな形を作る 2. 土台とふくらみと影の作りこみ 3. テカリ、中の光の反射、色の反射、完成! 4. 追記. 字の載せ方など、色の変え方など

  • 国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net

    Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi

    国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
  • ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ

    ※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著

    ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ
  • デザインの要素と原則

    2017年6月29日 Webデザイン 今回はデザインの基礎をお勉強しましょう!デザインは複数の要素(エレメント)と原則(プリンシプル)から成り立っています。それらを簡単に説明するとともに、要素と原則を生かしたWebサイトを一諸に紹介します。私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。ぜひ参考にしてみてください! ↑私が10年以上利用している会計ソフト! デザインの要素(エレメント)と原則(プリンシプル)は全てのビジュアルデザインの基礎と言われています。要素はデザインの「表現手段」を形成し、原則は「構造的特徴」を構成します。デザインにおける要素と原則の認識は、視覚構成をすることにおいての最初のステップ。Webデザイン、グラフィックデザイン、プロダクトデザインなど、すべてのビジュアルデザ

    デザインの要素と原則
  • 女子のための情報サイトデザイン21+4 – Commit Lab

    現在業務で女性向けの情報サイトのような物を作ってるのですが、デザインで少々詰まってましまいました。情報サイトとなると自然と文字数も多くなってゴチャゴチャしがちなうえに、元々女性的なデザインを意識して行った事があまりないので中々アイデアが出てこなくて困っていました。 いつも通りGoogle先生に訪ねてみたものの、案外見つからないんですよね。どうしようかなと悶々と悩んだ末に、ググれカスと言われるのを覚悟してwdscratchのフォロワーさん達に参考になりそうなサイトを教えて頂きました。 という事で今日はGoogle先生とwdscratchのフォロワーさん達が教えてくれた女子向け情報サイトをご紹介したいと思います。 今回協力して頂いた皆さん、当にありがとうございました。助かりました。 追記1:ひとつ掲載漏れがありましたので修正しました。 追記2:コメント欄でご紹介いただいたサイトを追加いたしま