タグ

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

  • 散骨女子で仕込んだものがちゃんと当たってくれた - Webクソ

    担当したページが2200RT、2900いいね、620はてブと伸びた~!! やった~!! ひゅ~!! やりやりやり~!! 備忘録的に、この企画で狙ったものと、それが当たってなぜよろこんでもらえたのかという部分をまとめてみようかと思います。 "記事"だとウソをついた 前回の記事で書いたのですが、ネット上にある記事ってほとんど静的なものばかりなので、GIF動画でちょっと動かしただけでも、観ている人は驚いてくれるものです。死んだように眠るお爺さんが突然クシャミすると安心しますが、死んだと思ったお爺さんが突然クシャミすると驚きますよね。そういうやつです。 なので、この企画では「静的なページと見せかけて、実はめちゃめちゃ動くサイト」というのを目指したわけです。「インポです」って言ったやつが途中から終始ギンギンになってると笑っちゃうのと一緒です。 狭いのが普通だと思わせた ワンカラムで狭くて細長い記事で

    散骨女子で仕込んだものがちゃんと当たってくれた - Webクソ
    Sato_4tree
    Sato_4tree 2015/01/19
    元記事スマホでしか見てなかったけど、スマホもPCもいろんな仕掛けがる上にランディングページとしても有効ですごかったなあ。すごい狙われていたのか
  • NHKスタジオパーク

    NHKスタジオパーク その2 NHKスタジオパークをVRで!大人気だったアニメのアフレコやキャスター体験をどうぞ! NHKスタジオパーク 閉館について 2020年5月11日 平素よりNHKスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のNHKスタジオパークは、6月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし9月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ

    NHKスタジオパーク
    Sato_4tree
    Sato_4tree 2013/11/06
    先輩に教えてもらったページ。ウィンドウサイズ変更でぬるぬる動くからブラウザからタブレットまで1ページで対応できる・・・!
  • ushigyunet|iPhoneからゲームやグルメまで、ひたすら詳しくレビューするブログ

    Amazonファッションタイムセール祭りのオススメ目玉商品まとめ。飲み物・おむつなど日用品セールも同時開催!【6/19まで】 2023年6月16日

    ushigyunet|iPhoneからゲームやグルメまで、ひたすら詳しくレビューするブログ
  • トーテムポーる Web 2.0 的影の付け方 for GIMP

    元ネタ: Bin-Blog: Creating shadows in Gimp 今回はGimpで画像に影を付ける方法です。 一番簡単な方法なら、画像を開いてメニューから'フィルタ->光と影->ドロップシャドウ'を選んで実行するだけです。 ただまぁ、こういうのじゃなくてもっと汎用的な方法を今回は紹介しましょう。 まず、適当な画像を用意します。 それをGIMPで開いたらレイヤーをコピーします。 レイヤーを複製したら下の方のレイヤーを選択した状態で、遠近法ツール(Shift-P)を選択します。 この状態で画像ウィンドウをクリックすると、画像の変形が出来るようになります。 影の形になるように画像の形を変形してください。 画像を変形したら画像ウィンドウ上で右クリックをしてメニューを呼び出します。 メニューから'画像->キャンパスサイズをレイヤーにあわせる'を選択してください。 これでキャンパスサイズ

    Sato_4tree
    Sato_4tree 2012/12/09
    久々にgimpと戯れたから今日は満足です。今日覚えた技。
  • ノンデザイナーのための配色理論

    「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、当のインサイトを見つけるUXデザインUXリサーチYoshiki Hayama

    ノンデザイナーのための配色理論
    Sato_4tree
    Sato_4tree 2012/12/09
    HUE/360の説明
  • [ HUE / 360 ] The Color Scheme Application

    Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP

  • あなたが作ったサイトのフッターの役割は?12のフッター活用方法!

    昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか!」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか? ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか? スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ

    あなたが作ったサイトのフッターの役割は?12のフッター活用方法!
    Sato_4tree
    Sato_4tree 2012/06/21
    職業柄、私の中でのフッターは決済/配送/送料情報を表示するところなのである
  • How to Create a Website Using Only iPad

    2013年11月28日 Webサイト制作, 便利ツール 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか?きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています!そうです、アレ、iPadで作ったものだったのです。ふふ。 ↑私が10年以上利用している会計ソフト! あると便利なスタイラスペン スタイラスペンはiPadなどのタブレットで使えるペンです。iPadを使ってお絵かきしたい人は持っているとなにかと便利。カナダのボクシングデーで$5位になっていたのでノリで買ったのがこのコ。ちょっとメーカーは覚えていないのですが、よくある無難なタイプの物ですね。書き心地は悪くないのですが、ペン先が太いので、細かい字や絵は書きづ

    How to Create a Website Using Only iPad
    Sato_4tree
    Sato_4tree 2012/05/30
    これすごいな・・・!!Textastic Code Editorのキーボードが良さげ
  • vv_000000000106185

    ヴィレッジヴァンガードの公式雑貨通販サイトでは、普通の雑貨屋さんには無いような個性派雑貨を多数取り扱っております。 SNSで人気のクリエイター雑貨やヴィレヴァン限定のコラボ雑貨、プレゼントにぴったりなおもしろ雑貨など。 ヴィレヴァン通販はいつでもあなたの心を豊かにする無駄遣いを応援します!

    vv_000000000106185
    Sato_4tree
    Sato_4tree 2011/11/20
    TEAM★LAB製!コンテンツありすぎて遊びきれない!!クリスマスプレゼントに暇つぶしにシャレオツアピールに是非。 #rakutentech
  • ルミネの広告|その絶妙さったら、 - オンナゴコロコロCREATIVE LABO

    鮮やかな色彩と、コピーが印象的なルミネの広告。 この広告がすごいところは ポスターをみた女子、誰もが「あるある」と共感し、 当事者意識をもってしまうところ。 そこをつくのかー、という絶妙なオンナゴコロに触れていて、 コピーってすごいなと改めて感じます。 コピーライター:博報堂 尾形真理子さん ※画像はルミネサイトのギャラリーから引用させて頂きました。 誰かの心を 灯したくて 私は着飾る。 わたしが着るから、 この服は笑う。 恋が終わるのなら、 せめて夏がいい。 試着室で思い出したら、 物の恋だと思う。 お気に入りを着ていれば、 作った笑顔は必要なくなる。 当の好きに近づくために、 なにが嫌いか知っておく。 泣きたくなったら、 さっさと着替える 嬉しいも哀しいも 表情より 着ている服で 伝わっていく たったひとつの恋が欲しくて どれだけの涙をこぼしただろう。 夜中にしぼんだ恋ごころも 目

    ルミネの広告|その絶妙さったら、 - オンナゴコロコロCREATIVE LABO
    Sato_4tree
    Sato_4tree 2011/08/03
    1番うえの、新宿駅に貼ってある広告の写真すごく好き
  • サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ

    ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向

  • not found

    Sato_4tree
    Sato_4tree 2011/05/28
    味の素カッコよすぎwww TKG!
  • CSSの知識をもっと深める30+2の小技テクニック集|Webpark

    的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

    CSSの知識をもっと深める30+2の小技テクニック集|Webpark
  • 見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選

    通販での会員登録の際などに名前やメールアドレスといった個人情報を入力することになる「メールフォーム」ですが、ウェブサイトのデザインに比べてあまり凝っていないような気がしている人も多いのではないでしょうか。 ここでは、見ているだけで楽しめるような、オシャレで創造性にあふれたメールフォームを32種類集めています。どのサイトもデザイン性に優れているので、これなら面倒になりがちなメールフォームの入力作業も退屈せずに済みそうです。 メールフォーム32選は以下から。01:ArtFlavours 02:VISMAAd 03:Christian Sparrow 04:Justdot 05:The Spray Studio 06:Ryan Scherf 07:Sandalias XTR 08:SVN2FTP 09:Wing Cheng 10:Denise Chandler 11:Needle 12:fabr

    見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選
  • インスピレーションを刺激させたい時に大抵見てまわるWebサイト集

    インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it

    インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
  • 2011年、押さえておきたいウェブデザインの11のトレンドとテクニック

    Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、

  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    サービス終了のお知らせ - NAVER まとめ
  • フッターデザイン.com -Webデザインの“フッター”を集めたサイト-

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

    フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
  • 高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

    サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス

  • [CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

    幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i