タグ

Web制作に関するatsushi1972のブックマーク (14)

  • [web制作]humans.txt ― webサイトに基本情報を設置しよう

    robots.txtとは robots.txtは、検索エンジン向けの情報を記述したテキストファイルで、書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせたりします。というか、まあ基的に出来ることはそれのみですね。例えば、 User-Agent: * Disallow: / こうrobots.txtに書くとルート以下全てのファイルへのクロールを禁止します。 決められた書式があって、それに沿った形で書かれていればクローラーはある程度いう事を聞きます。 humans.txtとは robots.txtがロボットの為の説明であるなら、humans.txtは人間の為の説明です。人間がサイトについて受け取りたい情報としては誰が書いたのか、何を使って書かれたのか、というようなことでしょうか。 そしてこのhumans.txtを設置する事を推奨するサイトもあり、面白いなーと

    [web制作]humans.txt ― webサイトに基本情報を設置しよう
    atsushi1972
    atsushi1972 2013/05/28
    humans.txt ― webサイトに基本情報を設置しよう 検索エンジンのクローラー向けの情報としてrobots.txtというものを設置することがありますが、それに対抗して?人間向けの情報を書くhumans.txtというものがあります。 robots.txtと
  • [web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した

    最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。 可読性とコンテンツ まず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。 リーダビリティーに関わってくるのは 文章量 図版率 内容 表現、言葉遣い といったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。 可読性の低いコンテンツ

    [web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した
    atsushi1972
    atsushi1972 2013/05/24
    webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した webコンテンツの可読性って最初からそのコンテンツが持っている内容、デザイン、そしてそれを閲覧する環境まで考えると色んな事が考えられます。出
  • 「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ!

    Photoshopでデザインカンプを作成して、いざコーディング!となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前(○○.jpgや○○.png)を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の

    「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ!
  • その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer - かちびと.net

    ここ何日かずっとレスポンシブWebデザイン のネタが続きますが・・便利なブックマーク レットです。閲覧中のWEBサイトをiPhoneiPadの幅で見たときの表示状態で確認出来る ブックマークレットです。というか単純に リサイズしてくれる、ってやつですね。 その場でレシポンシブWebデザイン対応の表示確認が出来るブックマークレットです。UAの切り替えとかじゃなく、単純にリサイズするだけですが、シンプルで手軽に表示確認出来るので使おうかなと思います。 地味に便利でした。使い方・・・の説明は不要だと思いますが他に書くこと無いので一応w ブックマークレット使うと右上になんか出ます。 あとは好みのデバイス選べばその場でリサイズされます。Webサイトのほうで背景色を決めてないとオーバーレイの色に依存しちゃいますけど。 でもこのブックマークレットはGithubでコードが公開されてますので好みのブック

    その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer - かちびと.net
    atsushi1972
    atsushi1972 2013/04/15
    もっといいツールも有りますがとりあえず、さっくり確認できるのは嬉しいかも
  • UXを学ぶならこれだけは目を通しておけ! - UX-design

    2013-04-11 UXを学ぶならこれだけは目を通しておけ! UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、格的にそれを仕事としてやろうとなった時から気で勉強しなきゃやばい!と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって

  • テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio

    テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応しています。 当サイトの背景とテキストのカラーを入力してみます。

    atsushi1972
    atsushi1972 2013/04/11
    目で見て判断してもいいのですが、こういう形で一律で判断できるとちょっと安心かも?
  • 無料ホームページ作成ツール「Jimdo」と「Wix」を比較。|イケハヤ大学【ブログ版】

    「WixとJimdoってどっちがいいですか?」と聞かれたので解説記事を書いてみます。 無料ウェブサイトビルダー2強 JimdoとWixは「無料ウェブサイトビルダー」に属するウェブサービス。どちらも「知識ゼロで簡単にウェブサイトが制作できる」ことを売りとしています。 全世界で見たときのユーザー規模としては、Jimdoが約800万ページ、Wixが約2,900万ページと、Wixが上回っています。Jimdoは日拠点を構えて普及に努めているため、国内での知名度・利用度はJimdoに軍配が上がるでしょう。 資金調達面でいうと、Wixは5,850万ドルを調達、Jimdoはあえて多額の調達は実施しないという方針を貫いているのは対称的です。このふたつの企業がどのように対決、棲み分けしていくのかは個人的にも関心があります。 比較してみた 独断と偏見で表にするとこんな感じ。お互いどんどんサービスを改善している

    無料ホームページ作成ツール「Jimdo」と「Wix」を比較。|イケハヤ大学【ブログ版】
    atsushi1972
    atsushi1972 2013/04/11
    コーディングの知識無しに、見たまま編集で手軽にサイト(Webショップ/ブログも)が作れるので、すてきなサービスです^^僕のお仕事は減りますが^^;
  • 構造はHTML、装飾はCSS、動きが欲しければJavaScript 静的サイトの成り立ちを理解する

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    構造はHTML、装飾はCSS、動きが欲しければJavaScript 静的サイトの成り立ちを理解する
    atsushi1972
    atsushi1972 2013/04/11
    これはWeb系の仕事をされている方は一読の価値はあるかと。あくまで「基本」なので必須でなかったりもするのですが^^;
  • 画像のズーム効果、画像の一部を拡大表示|jQuery plugin|Ajax|PHP & JavaScript Room

    jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

    画像のズーム効果、画像の一部を拡大表示|jQuery plugin|Ajax|PHP & JavaScript Room
  • 「QRHACKER」でオシャレなQRコードを簡単作成 | ライフハッカー・ジャパン

    ブランドのロゴが入っていたり、カラフルな差し色が入っていたり、ちょっとオシャレな自分だけのオリジナルQRコードを作成できるのが「QRHACKER」です。 使い方はとっても簡単! 左上から順に必要項目を設定していくだけ。 まずは、QRHACKERのサイトへアクセスしましょう。 QRコードに登録できる情報は「Text」、「URL」、「Phone number」、「VCard/Contact details(電子名刺)」の4種類です。この中から作りたいQRコードの種類を選んで、下のボックスに情報を登録したら「GENERATE」をクリックします。 次に、右側からデザインを設定します。背景や画像の挿入、色の設定など、細かいカスタマイズも可能です。 できあがったQRコードは、PNGかPDFでダウンロードできます。名刺にプリントしたり、スマートフォン向けサイトへの誘導用としてWebサイトに貼り付けたり、

    「QRHACKER」でオシャレなQRコードを簡単作成 | ライフハッカー・ジャパン
    atsushi1972
    atsushi1972 2013/04/11
    2011年の記事ですが、QRコード自体はよく見かけるものになりましたが、ちょっとアレンジするとまた雰囲気変わっていいかも?
  • WEB制作時に役立つ!ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く

    WEB制作時に役立つ!ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)

    webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTMLCSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでもべて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること

    デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)
    atsushi1972
    atsushi1972 2013/04/09
    ちょっと古い記事ですが。
  • グラデーション生成や角丸、ボックスシャドウをCSSで生成する際に使える「CSSmatic」:phpspot開発日誌

    グラデーション生成や角丸、ボックスシャドウをCSSで生成する際に使える「CSSmatic」 2013年04月05日- The ultimate CSS tools for web designers | CSSmatic グラデーション生成や角丸、ボックスシャドウをCSSで生成する際に使える「CSSmatic」 ツールとしてのデザインや使い勝手もよくて便利に使えそうでしたのでご紹介 予め用意されたグラデーションなどからカスタマイズすることも可能。非常になめらかなグラデーションが簡単に作れます リアルタイムアップデートする角丸生成ツールも便利 こちらもリアルタイムに反映されて便利なボックスシャドウ生成 関連エントリ JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css

  • SEO対策|検索上位を独占するために弊社が行っている36の手順

    コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト、上場企業のマーケティング担当者など多岐にわたる。 サイト公開からわずか10ヶ月で14.6億円の生み出す不動産投資メディア、契約率40%程度の理想的な見込み客が集まるブランディングメディアなど数々の成功事例を生み出してきた。「ユーザーに集中すれば結果はついてくる」をモットーに年間4,000件以上のコンテンツ作成に携わっている。 …続きを読む コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト

    SEO対策|検索上位を独占するために弊社が行っている36の手順
    atsushi1972
    atsushi1972 2013/04/04
    SEO自体は個人的には、今の時代は、最低限のルールを守るぐらいで、後は、ソーシャルや他のアプローチの方が効果的だとは思っているのですが、ノウハウは知っておいって損はないかなと。
  • 1