タグ

関連タグで絞り込む (224)

タグの絞り込みを解除

WebDesignに関するakira_maruのブックマーク (336)

  • 8 CSS tools for better web design

    It’s a bit odd to execute by hand some repetitive CSS tasks, and also really not productive. I have collected for you a set of eight tools that will help you to build better websites faster. 1. CSScomb Website Sort your CSS properties automatically with this tool. It can be used with many of the most popular text editors, such as Coda or Notepad++, but also has an online version. 2. Normalize.css

    8 CSS tools for better web design
  • まるでおとぎ話の世界みたい!かわいくてガーリーな21サイトをご紹介

    こんにちは。可愛いサイト大好き。 可愛い女の子はもっと好きな井畑です。 そんな井畑ですが、 ブックマークしていたお気に入りの可愛いサイトが増えてきたので、 今回ここでご紹介したいと思います。 僕の個人的な趣味が含まれますので、 「こんなのガーリーでもなんでもねーよww」とか、 twitterやはてぶで話題になったもので、既に知ってるものなども多くあるかと思いますが、ご了承くださいませ。 それではどうぞー!! Peter Granfors Peter Granfors まずは海外のサイトをご紹介していきます。 フィンランドのグラフィックデザイナーさんのポートフォリオサイト。 クリーム色のベースにピンク・ブラウン・紫のテクスチャーとイラストが繊細でとても可愛いサイトです。動物のモチーフも印象的で、タイトル部分のフラミンゴは勿論、フッターのお猿さんにも注目です。 me & oli me & ol

    まるでおとぎ話の世界みたい!かわいくてガーリーな21サイトをご紹介
  • bizyou.jp

    Buy this domain. 2019 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

  • bizyou.jp

    Buy this domain. 2019 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

  • IA Basic Learning Kitを公開しました - kamihira_log

    IA Basic learning kitとは Webにおける情報設計(インフォメーションアーキテクチャ)についての基礎的な考え方を学ぶことを目的とした教材です。ワークショップ形式でみんなで考えながら進めていくことができます。もともと僕が担当しているネットワーク情報学部の2年生向けの演習用教材として開発したものですが、広く一般の人や他大学の学生さん達にも利用してもらえるように新しくまとめ直しました。 内容に関しては、坂貴史さん(株式会社ネットイヤーグループ UXデザイナー / IA Thinking 著者)に専門的視点で監修して戴きましたので、数少ないIA系の初学者向け教材として使えるレベルになっていると思います。 ここからPDFをダウンロードできます。 印刷してご利用ください。 キットの中身について ある観光地のキャンプ場を題材に、予めカード化してある素材(コンテンツカード)を机の上

  • サイト制作時のメモ 2012年前半

    ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 (対象がいわゆるモダンブラウザの場合) Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便

    サイト制作時のメモ 2012年前半
  • 可能性を広げる10のスタイルシート | コリス

    ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に(主に)縮小してフィットさせるため

  • 私が出会った優秀なWebデザイナーに共通した26の特徴

    優秀なWebデザイナーって何だろう。と考えたことはありませんか?私は昔からそんなことを考えているんですが、最近、優秀なWebデザイナーについて、なんとなくですが気づいたことがありましたので、今日はそのこと(優秀なWebデザイナーの特徴)についてまとめてみようと思います。 こうして優秀なWEBデザイナーに共通している特徴をまとめてみると、私はまだまだ小さい人(Webデザイナー)だなと痛感させられます。優秀なWebデザイナーの方々の多くは、人としても大変魅力的で、彼らの周りには自然と人が集まっているように感じます。 今日の記事は、あくまでも私が気づいた点であるために、必ずこれらができているから優秀なWebデザイナーであるとは限りません。ですがこの記事が「優秀なWebデザイナーとはどんな人なのか」「どうすればそうなれるのか」という事を考えるきっかけになれば幸いに思います。 人として共通している1

    私が出会った優秀なWebデザイナーに共通した26の特徴
  • レスポンシブWebデザインの基礎を習得したい人に絶対役立つスライド

    レスポンシブ・ウェブデザイン -Responsi... / レスポンシブ・ウェブデザイン基礎 / ADC OnAir 第5回 『レスポンシブ We...他...全6件

    レスポンシブWebデザインの基礎を習得したい人に絶対役立つスライド
  • Ian Storm Taylor

    Summer 2013 Refactoring Github’s Design Reducing an interface until only the absolutely necessary elements remain is one of the most satisfying tasks in design. Spring 2013 What’s Wrong with the iOS 7 Icons? “It looks childish.” Media Queries are a Hack The big buzzwords in CSS these days are “modular” and “responsive”—and for good reasons. But we’re still trying to achieve those goals with the wr

  • http://appdrill.net/58841/paparazzi-update.html

    http://appdrill.net/58841/paparazzi-update.html
  • JIS X 8341-3:2010 対応発注ガイドライン 2012年8月版

    1. ガイドラインの目的 ガイドラインは、ウェブコンテンツ(ウェブアプリケーションを含む)をJIS X 8341-3:2010に対応させることを要件として発注する際に、調達仕様書、提案依頼書(RFP)などの書面に明記すべき事項を示すためのものである。 昨今、民間、公的機関を問わず、JIS X 8341-3:2010への対応を促進することを目的に、明示すべき情報が不足した仕様書等が見受けられる。この状況を踏まえ、発注する前に検討しておくべき事項について、発注者が要件を定めやすいように具体例を交えて解説するものである。 2. 発注時に検討すべき事項 次の各事項について検討した上で、書面に明記する。 なお、国及び地方公共団体等の公的機関のウェブコンテンツ(公式ホームページ、団体が提供する関連サイト、ウェブシステム等)については、総務省の「みんなの公共サイト運用モデル(2010年度改訂版)」(以

  • クリック率・コンバージョン率を高めるボタン。3つの大きなポイント

    WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン(Call to Action Button)】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在

    クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
  • Sneakpeekit Sketch Sheets

    Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des

    Sneakpeekit Sketch Sheets
  • Humans TXT: 私たちは人間です。機械ではありません。

    humans.txt について humans.txtって何? ウエブに関与した人たちについての情報が入ったTXTファイルです。 何故TXTなのですか? これは 簡単に早く 作れるのです。何故なら コードに於いて篏入的ではないからです。サイトの効率が低下するなどの主張により、サイトの所有者は、ウエブ作者が自分のウエブにサインすることを望まないことが多くあります。こうすることにより、外的に、素早く、簡単に、気軽に、作者が誰であるかということ(所有権ではなく)を明示できます。 どこに配置すれば良いですか? サイトルートです。 robots.txt の隣です。 そして(可能であれば) <head> の authorタグに次を追加してください <link type "text/plain" rel "author" href "http://domain/humans.txt" /> 何故これをやら

  • http://www.csspop.com/

  • http://japan.internet.com/webtech/20120725/1.html

  • 21 Examples of Inspiring Typography in Web Design

    15 Comments I agree that choosing a right typography for a website is important in the design process. The above collections are great and I hope to use a couple for my next projects especially Oak and Wicked Plate. Also here is another post which I use for inspiration – https://neatdesigns.net/40-awesome-typography-examples-to-use-in-your-projects/ Hope it helps 🙂 Simply wonderful… good works. I

    21 Examples of Inspiring Typography in Web Design
  • わかりやすい文章の10大原則

    この記事では、LINEグループに招待できない・参加できない時の対処法や原因についてお伝えしていきたいと思う。 複数人で連絡を行う際にLINEのグループ機能は非常に役に立つ。学校でも職場でも利用されている事が多く、グループ内通話も出来るので簡単な打ち合わせ程度であれば、LINEでも可能になった。 グループの作り方も非常に簡単。 しかし、なぜか相手に招待が届かない…といったことも度々ある。 では、この招待が届かない時によくある原因について見ていこう。 LINEグループに招待できない時の対処法・原因 基的に以下の場合は、相手に招待を送っても届かない。 既にLINEを退会している(アカウントを変更している)場合 既に招待を送っている場合 相手にブロックされている場合 もしくは、招待しているけれど参加されない…といった場合は、相手側が参加を拒否している可能性もある。 上記の3点に当てはまらない場合

    わかりやすい文章の10大原則
  • 私がWebサイトの配色を決める時の流れ

    ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の

    私がWebサイトの配色を決める時の流れ