タグ

webdesignに関するkazwoo215のブックマーク (8)

  • 「アイキャッチってなんだろう?」1,000個以上を制作して学んだこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    デザイナーの佐藤タカアキ(@sato_tkaaki)です。 僕は2年半くらい前にLIGのことを知って、デザイナー募集記事をきっかけにLIGへ入社しました。そして当時メディア事業部のデザイナーだった王さんからLIGブログのアイキャッチの仕事を引き継がれ、現在ではその制作数も1000を超えました。 そこで今回は、LIGブログのアイキャッチ画像について、制作過程や制作から学んだことなどをお話しします。 そもそも「アイキャッチって何?」という方は「ブログの集客を加速させる「アイキャッチ」とそのデザインについて」をご一読いただけますと幸いです。アイキャッチの概要や必要性、効果的な魅せ方について書いています。 LIGブログはなぜアイキャッチにこだわるのか 他のメディアではフリー写真素材をそのまま使ったり、ちょっとテキストを加えただけの写真を使ったりする中、LIGブログはやたら社員を出していたり、めっち

    「アイキャッチってなんだろう?」1,000個以上を制作して学んだこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • スクロールバー付きのボックスを設定する - スタイルシート

    スクロールバー付きのボックスを設定します。 PタグやDIVタグなどに指定します。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 また、その他の指定方法はメニューの「基・リファレンス」を参考にして下さい。 → ページ全体に適用する場合(サンプルのためタグごとに効果を変えています。参照) <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .scr { overflow: scroll;   /* スクロール表示 */ width: 100px; height: 100px; background-color: red; } .vsb {

  • suyamanatsuki.polka3.com

    Skip to content 2023年7月15日2023年8月4日 ニーチェ 自分を愛するための言葉 (PSP研究所  […] 2023年6月26日2023年8月4日 (帯イラスト)おつまみとお酒のマリアージュ(池田書 […] 2023年6月23日2023年8月4日 「宗教2世サバイバルガイド」(2023 ダイヤモン […] 2023年6月16日 50歳の分岐点 差がつく思秋期の過ごし方(2023 […] 2023年6月5日2023年6月14日 著 岡田 […] 2023年6月1日2023年6月14日 暮らしの図鑑 筆記具 (2023 翔 […] 2023年5月16日 「ギフテッドの光と影」 2023 朝日新聞出版 著 […] 2023年5月16日2023年5月16日 企画編集 箱崎茂美さん(standard fa […] 2023年4月22日2023年4月22日 天然生活 2023

  • UI-patterns.com

    User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.

    kazwoo215
    kazwoo215 2012/05/31
    ほほー知らなかった、こんなサイト!φ(゚Д゚ )フムフム
  • Collection: Design Patterns

    Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther

    Collection: Design Patterns
    kazwoo215
    kazwoo215 2012/05/31
    なるほどなるほど、色々あるね!φ(゚Д゚ )フムフム
  • Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17

    Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作

    Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17
    kazwoo215
    kazwoo215 2012/03/28
    φ(゚Д゚ )フムフム…コレは覚えておこう!
  • CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ

    前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
    kazwoo215
    kazwoo215 2011/11/14
    コレすっげー!こんな事が出来るんだ!
  • webデザインにおける視線誘導のおはなし | 07design.blog

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

    kazwoo215
    kazwoo215 2011/06/03
    おぉー!これは覚えておこう♪
  • 1