タグ

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

  • サイトの「色」選びに役立つ20のツール

    色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できるサイトもあり、取っ付きやすいと思います。 Color Trends + Palettes :: COLOURlovers kuler ColoRotate: Colors come to life in 3D. Color Theory @ ColorJack カラーピッカータイプ 好きな色を選ぶと、その色と相性のよい色や関係性の高い色などが表示されます。 ウェブ配色ツール Ver2.0 Color Scheme Designer 3 [ws] Color Scheme Generator 2 Col

    サイトの「色」選びに役立つ20のツール
  • 思わず泊まりたくなるホテルや旅館のWEBサイト〜国内篇〜 | minspi

    私は18歳になった時からパチンコやスロットをするようになりました。総合的には負けていると分かっていても止めれません。時には消費者金融からお金を借りてまでパチンコ屋に行く事もあります。結婚し、に「お金を借りてまでギャンブルするなんて最低!」と言われてしまいました。怒るのも分かるのですが、パチンコ代の為に消費者金融からお金を借りる事は、そこまで悪い事なのでしょうか? 自己責任です!!例え負けても文句は言えません!! 消費者金融でも銀行でも、使い道自由なカードローンという事なので、ギャンブルに使っても問題はありません。貸付の条件としても事業の為の融資は不可という事は多いですが、ギャンブルはダメとは書いていませんし。ただし、ギャンブルに利用するお金は自己責任になります。言い方を変えると自業自得です。それが分かっているならば、私は問題ないかと思います。 私の旦那もクレジットカードのキャッシング機能

  • カラー別、デザインが素晴らしいウェブサイトのまとめ

    カラー別にデザインが素晴らしいウェブサイトのまとめを紹介します。 Web Design: Nice and Clean Layouts ホワイトをベースにしたウェブデザインのまとめ キャプチャ:Stu

  • [CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス

    実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。

  • layer8.sh

    This domain may be for sale!

    layer8.sh
  • higash.net

    higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

  • Web屋の私がブックマークしているサイト65 | Webクリエイターボックス

    2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します!有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください! ↑私が10年以上利用している会計ソフト! ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ

    Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
  • 同色系でまとまりのある配色、WebデザインにするためのTips

    いろいろな色相を使わずに、ひとつの色相の彩度違い、明度違いなどでデザインしていく同系色デザイン。 多くの色相を使わない同色系デザインは、たくさんの Webサイトでも使われている人気の配色です。 同色系でデザインしていくと、ページの統一感がでて色の持つ力を印象付け易いというメリットがあるだけでなく、初心者でも比較的まとめやすい ... という作り手側のメリットもありますね! 同色系でまとめられたデザインは、ページに統一感があって、よくまとまって見えますよね。そして色の持つメッセージを、強く印象付けるのにとっても効果的だと思います。いろいろな色相を使ったデザインに比べて、比較的まとめ易いし、色的な効果を発揮しやすい同色系デザイン。同色系は簡単 … というか、カラフルデザインに比べれば簡単かもですけど、配色における基的なポイントは、他の配色方法にも通じています。今日は基的なところを押さえなが

  • 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice

    私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 (※文中のショートカットキーは全てMacの場合です) 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う

    私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
  • ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方

    あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ

  • WD101: Webは見た目のコントロールがきかない

    このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSSHTML (ときどき JavaScript)を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D

    WD101: Webは見た目のコントロールがきかない
  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

  • こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ

    企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。

  • 最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

    ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • Webデザインにおける、1pxへのこだわり

    ☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです^^ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ~」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕

    Webデザインにおける、1pxへのこだわり
  • App Collection スマホのおすすめアプリ紹介

    「みんなどんなアプリを使ってるんだろう?」そう考えたこと、誰だって1度や2度はあるはずです。 はるか昔、スマホ創世記の頃は選ぶ余地すらなかったアプリですが、今では考えられないくらいいろいろな分野の様々なアプリが存在します。 まるでファッションのようにアプリにもトレンドがあり、一度流行ると、爆発的な広がりを見せるのがアプリの不思議なところでもあります。 例えば今や誰もが知っていて、利用している人が多いアプリといえば、 『twitter』や『Instagram』。 日常のつぶやきや画像をUPして世の中の人とつながりを持てるツールとして活躍しているアプリもあれば、日常の業務管理を行えるアプリや共働きに重宝される、お互いのスケジュール共有アプリ、 また誰もが1つは入れているであろうゲームアプリや画像加工アプリ、今ではスマホユーザーの大多数が使っているであろう『LINE』のスタンプを簡単に作成できる

  • webデザインにおける視線誘導のおはなし | 07design.blog

    こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す

  • not found

  • 「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

    ☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。???(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ

    「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント