タグ

webdesignに関するraituのブックマーク (255)

  • Awwwards - Website Awards - Best Web Design Trends

    ESE Agency — Site of the Day - 7.32 — May 10, 2024 —

    Awwwards - Website Awards - Best Web Design Trends
    raitu
    raitu 2020/03/13
    世界中のイケてるWeb designを紹介しまくるサイト。以前はcssに絞ってたけど最近はそうでもないようだ。
  • 英語サイト指南役 日本人が作る英語サイトには、こんなに間違いが! あの有名企業にも? あの有名企業の英語サイトにも沢山のひどい誤りが

    以上、御覧いただいたように、日屈指の有名企業の英語版ウェブサイトであるにも関わらず、あまりにもお粗末な誤りが頻出しています。しかも上に挙げている例は、ほんの一部にすぎません。入念にチェックを行えば、同様の誤りが次々に見つかる可能性はかなり高いと思います。このままの状態では、世界市場に向けて自社をアピールするどころか、イメージダウンに繋がっていると言わざるを得ません。どんなにサイトデザインの方に力を入れていても、肝心の英文は適当に作っているのが見え見えだからです。 おそらくこのサイトの英文は、プロが作っていません。数多くの日企業の英語サイトをチェックしてきた弊社の経験から、理由は推測できます。コスト削減のため、あるいは英語サイト制作に対する意識の低さのために、「会社内で一番英語ができると思われている人」に英訳を一任してしまっていたり、サイト構築のオペレーターも、英語のできない人であったり

    raitu
    raitu 2013/03/22
    全部楽天の晒しあげであることに吹いた。楽天だったら恐喝営業かけても良いわけですね。こわいなー
  • 要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話

    2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。(ミスなどの指摘は @lowply までお願いします) もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2

    要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
    raitu
    raitu 2012/09/26
    AppleがWeb上のアニメーションをゲームのスプライト的な手法でJS&canvasタグで実装してるという理解をした。職人芸やな
  • 創業慶応元年 かづら清老舗 | つげ櫛・かんざし・椿油

    かづら清は創業慶応元年より、女性の髪まわりの小物を創り、商って参りました。 髪を美しく整えるためのつばき油やつげ櫛、美しく結い上げられた髪を彩り飾るかんざしや髪飾りなど、 移り変わる時代の中で、伝統美と現代の趣向を調和させた品々は、 かづら清ならではの感性と技術により創作いたしております。

    創業慶応元年 かづら清老舗 | つげ櫛・かんざし・椿油
    raitu
    raitu 2012/01/12
    サイトデザインがシンプルかつ大胆で気に入った。美しい。
  • 有限会社ノオト - Note, Ltd.

    ※こちらの採用は2011年10月で終了しました。 ノオトが手がけた1つのコンテンツとして、 末永く公開保管させていただいております。 有限会社ノオトは、いわゆる"編集プロダクション"のカテゴリに入る会社です。でも、編プロって「きつい」「給料激安」「帰れない」の3K職場なんていわれますよね……。我々はそんな負のイメージを打ち消すべく、常に新しいアイデアやユニークな切り口で仕事を面白くする"コンテンツ・メーカー"を名乗っています。 そんな弊社が今回募集するのは、上記に列挙したような人材です。ライターや編集者としてその能力を存分にふるいたい人、いろんな刺激をどんどん吸収する好奇心旺盛な人、ちょっとした失敗もすぐ跳ね返す向上心のある人。私たちがワクワクするような応募者を心待ちにしています!

    raitu
    raitu 2011/09/14
    タイトルでバーグハンバーグバーグ特定余裕でした
  • YASUYUKI OKAMURA | 岡村靖幸

    岡村靖幸の公式サイトです。

  • WebデザイナーにおすすめのiPhoneアプリ21

    2014年8月22日 便利ツール WebデザイナーさんやWeb関連のお仕事をしている方におすすめのiPhoneアプリをいくつか紹介します!使用しているWeb関連以外のアプリは、以前書いた「使用中の無料iPhoneアプリ31」をご覧ください! ※紹介しているiPhoneアプリの値段は執筆時のものです。購入時はご確認ください。 ↑私が10年以上利用している会計ソフト! WebデザイナーにおすすめのiPhoneアプリ 目次 Web制作関連 配色関連 画像加工関連 お仕事効率化 Web制作関連 1. FTP On The Go FTP On The Go PROをダウンロード(850円) どこにいてもFTPサーバーに接続できて、ファイルのダウンロード・アップロード・編集ができちゃう優れものアプリ。FTPのURL・ID・パスワードを入力するだけで接続完了です。新規ファイルやフォルダの作成、パーミッシ

    WebデザイナーにおすすめのiPhoneアプリ21
  • スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)

    スマートフォンの普及を背景に、「レスポンシブWebデザイン」(Responsive Web Design)という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか? 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

    スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)
    raitu
    raitu 2011/06/19
    「ウィンドウ幅が480ピクセル以下になるとレイアウトが自動的に変更される。これがレスポンシブWebデザインの一例」これは定着しそう
  • 犯してはいけないHTMLタグの過ち10個

    【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を

    犯してはいけないHTMLタグの過ち10個
    raitu
    raitu 2011/04/21
    「1. インライン要素の中にブロック要素を入れない」「2. 画像に代替テキストのalt属性が入っていない」あたりはとってもあるある。
  • STRAIGHTLINE™

    Motoshi Goto / Freelance Web Designer and Developer from Oita, Japan.

    raitu
    raitu 2011/03/15
    Yahoo知恵袋人生相談版というところでしょうか
  • 海外Webサイト・海外Web屋の特徴

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

    海外Webサイト・海外Web屋の特徴
    raitu
    raitu 2011/03/03
    カナダとオーストラリアの話。イラスト付きで見やすい。フリーランスが時給制とか。
  • UNIQLO TOP - UNIQLO

    白石麻衣さんが着る UNIQLO : C 春夏コレクション少しシックな、 私のふだん着。 2月23日(金)販売開始

    UNIQLO TOP - UNIQLO
    raitu
    raitu 2011/02/18
    投稿されている写真のレベルが高すぎる気がするユニクロファッションコミュニティサイト。モデルとかファッションとか以前に、写真のレベルが高い。今は仕込みだからなんだろうけど、今後どう回るかちょっと興味在る
  • [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

    これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み

    [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
    raitu
    raitu 2011/02/17
    HTMLというより、イラストフォントデザインの話。実例込みで見やすい。ひらがなカタカナは基本詰める、句読点や括弧も詰める、括弧は細いフォント、単位は文字サイズ小さく、助詞もサイズ小さく、など。
  • HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた - Publickey

    HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超

    HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた - Publickey
    raitu
    raitu 2011/01/31
    「単に地下鉄路線図を表示するだけのアプリ」オフラインでも使えるようにするためにマニフェストファイルと.htaccessファイルを設定してる
  • HTML5でWebアプリ!マークアップエンジニアがつくるToDo管理アプリ

    「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。 はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。 今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ~HTML5でつくるWebアプリ~」です。 話の内容は、最近なにかと目にする「HTML5」について。 その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。 HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。 これを利用して

  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
  • HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)

    スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。

    HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
  • スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

    【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) スマホサイトの作り方関連のブログとかを見てて、viewport周りの基的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか? ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait(縦)表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 (まぁ、拡大とは意味が違うので当然なのですが。。。) 具体的にどうい

    スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
  • 「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope

    【目次】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん!!」って方も多いのではないでしょうか? ということで、記事でも書いてみっかぁ!と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です( ̄▽ ̄;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon

    「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた  -1.メニュー編-(※iPhone寄り) - Kaleidoscope
  • Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17

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

    Webデザイナー必読?!著作権について知っておくべき10のこと - kojika17
    raitu
    raitu 2011/01/13
    「"モナリザ"の制作者は1519年に亡くなられているので著作権の保護期間が満了/自由に改変することができます。」「スカイツリーのような有名な建物などをデザインに使用、またはトレースを行うことは可能です。」