[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サイトに基本情報を設置しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/e981a6ebf231b21c0cf0b1faa5242654779eb944/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fwebsite-humans-txt-01-150x150.png)
株式会社LIGに行って「HTML5KARUTA」で遊んできました
最近企業ブログとしては珍しく月間140万PVを越え、盛り上がっている株式会社LIGに「HTML5KARUTA」を持って遊びに行ってきました★ http://liginc.co.jp/ 株式会社LIGは、東京の東側、我らが台東区にオフィスを構えるweb制作会社です。最近ブログが物凄く人気になっているわけで、このブログでも何度か紹介させてもらっています！ [web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい – WEBCRE8.jp まあ、このブログを知っている位なら皆さんLIGのブログは既にご存知かと思われます。それくらい人気ですよねー。 東東京のアツい制作会社 私は東京の東側に住む者として、西側には負けないように東東京のwebを盛り上げることに協力していきたいと常々思っているんですが…先日行ってきたウサギィにしろ、アシアルにしろチームラボにしろ、東東京の活発な企業ってたくさ
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
[web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい
たくさんのブログのお世話になっています 私はweb制作の知識を、webでの検索やRSSで受信することをメインに集めています。本も読みたいんですけど、なかなか…年に大した量を読むことはありません。 web制作を学び始めて3年以上経ちましたが、最近特に気になるのは読んでいるブログに、制作会社のスタッフ持ち回りブログが増えてきたなーという事です。 好きな企業ブログの魅力 さて、普通の個人やフリーランスの人がやっているブログや企業名義で情報を発信しているブログと比較して、こうした(特に持ち回りブログの)見どころとは何でしょうか。 何かしらのインセンティブを用意していてスタッフの記事を書く意欲が高い、企業のワークフローに属しているのでクオリティーが高い、といったことはフリーランスの人や企業名義のブログでも同じだと思うので置いておきます。 更新頻度が高い まあ、私もやる気だけで企業ブログの更新頻度に追
![[web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい](https://cdn-ak-scissors.b.st-hatena.com/image/square/59fc4b8cf1c794158aa358a703d709cadeff33bf/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F11%2Feyecatch-collection-150x150.png)
ここ一年くらいで参考になったデザイン/webデザインに関するスライド10
スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ なんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ 本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。 タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考
[クリエイティブ]私が意識している、無難かつ人の興味を惹き効果を最大化するコンテンツ制作のヒント
また、何かを作ったとき、もしくは作ろうとし、仮にそれが実際に役に立つものだったり面白いものだったとします。 それがいいものなら、いいところをどんどんプッシュして行けばいいんですけど…その良さが伝わりにくいものだったりする場合もありますよね。「使えば絶対ハマる！俺たちだってそうだった！」とは思うんですけど、どうも最初の印象でそう思ってもらえない…新しすぎたり、突飛過ぎて、それを使う日常が想像できないんですね。 そういうときに、あえてセールスポイントとは違うキャッチーな言葉を使ってまず興味を持ってもらおうとすることがあります。もちろんそれが本質とは違うものであってはいけないですけどね。 ちなみにこれを無差別なレベルで大きくしてしまうのが(対象を選ばない)広告になります。 小さなフックは強く興味を惹く メジャーなものや大きく流行っているものは、ユーザーが増えるにつれライトな層の割合が大きくなって
![[クリエイティブ]私が意識している、無難かつ人の興味を惹き効果を最大化するコンテンツ制作のヒント](https://cdn-ak-scissors.b.st-hatena.com/image/square/2966c609040615dbc724ba8a588438e05981a24b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcreative-silver-theory-11-150x150.png)
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
新春!!HTML5KARUTA大会報告＆まとめ #HTML5KARUTA
今週日曜日に全国で行われた「新春!!HTML5KARUTA大会」の様子のレポートを紹介します。一応渋谷会場のレポートもしたいと思います！ HTML5KARUTA大会、無事終了しました！ 2013年年始のイベントごととしては初めての人も多かったのではないでしょうか。1月6日日曜日、webcre8の制作したHTML5KARUTAを使った全国的なイベント、新春!!HTML5KARUTA大会が行われました。 新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA webcre8としてはこうしたイベントに参加する事自体あまりできていなかったのですが、せっかくやるなら話を大きくしたいという安直な考えのもと、いきなり主催で、しかも全国を巻き込んでのイベントとしてしまいました。 Photo by @shinsyou 実際のところ私自身が考えていたような段取りでイ
あなたのブックマークをwebの肥やしにしない為の実用タグ付け規則考
なぜブックマークするのか 皆さんもwebで読んだり興味を持ったwebページを、自分なりの理由や線引きの元にブックマークしますよね。 でもそれを後で活用できている人ってどれくらいいるのでしょう。せっかく一瞬とは言え作業をしているのですから、何かの役に立てないと意味がないですよね。まず、どういった理由でブクマするのか、ちょっと考えてみます。 ググっても見つからない時の為の保険 大抵の場合、記事のタイトルや概要を覚えておけば、本当はブクマする必要すらないのかもしれません。webcre8がブクマし忘れて後々困った！と思うのはやっぱり英語の記事やチュートリアル、素材を探すときですかね。単語だけだと色々引っかかって見つかりません…。 後で読み直す為 しっかり読んでないけどあとでもうちょっとちゃんと読みたい、と言うようなものです。結局読み返さずじまいの記事も多いと思いますけど…。まあそれはさほど必要のな
HTML5の学習に役立つ(主に)日本語のサイトまとめ2012
webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日本語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですｗ HTML5に関する国内のサイトや情報源をまとめました と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英
[HTML5 入門]HTML5の略された49タグの語源全てを調べた
タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ
![[HTML5 入門]HTML5の略された49タグの語源全てを調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
ブログをどう始めたらいいか分からない人へ。目的とテーマ
はじめに webcre8は毎日楽しくブログのことを考えています。ときには制作そのものより楽しくなってしまうほどにです…！ｗ 仕事柄なのか普段から仲良くさせてもらっている人たちもやはりwebに興味のある人が多く、その中にはブログを始めたいと言う人も結構います。…そして、色々考え込んじゃってなかなか行動に移せない人も多いんですよね。 webcre8自身もそうでしたし、ブログを始めてそれほど経っているわけでもありません。なので説得力がどの程度あるかは分かりませんが…この記事ではそういう人たちに向けて、どのようにブログを始めればいいかをwebcre8なりに書かせてもらおうと思います。もしかしたら超詳しい人とか遠い存在な人が書くより、私のように身近だったり普通の人が書いた方が自分と重ねやすいかもしれないですし！ なお、この記事はどちらかというと元々web制作の仕事をされていたり、勉強中の人を想定して
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました
以前グラフィックパターンの柄やテキスタイルの名前まとめと言う記事を書いたのですが、それのパターンを実際に作りました。自作パターンを持ってない人はベースに是非★ 今回作ったのはPhotoshopのパターンファイル。拡張子は.patで、Photoshopのプリセットのpatternフォルダには初期設定のものが入っています。この辺は過去記事[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！で一通り説明しています。使い方が分からない人はそちらを参照してくださいね。 グラフィックパターンの名前を調べましたけど 以前書いた[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめという記事で、色んなグラフィックパターンや柄の名前を調べてみました。服飾やインテリア壁紙、ファブリック等に使われるこれらのパターンですが、webサイトに応用することでクールだったり、かわいらしい
![[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/fadc09691a669209cd561e8b1789e5fd0c4cc51b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F07%2FPhotoshop-pixel-pattern-05-150x150.png){kind=tracking}
プログラミング言語、フレームワーク等の名前の由来・語源を調べてみた
念のため言っておくとこのブログには基本的にプログラミングの話題はないですｗこの記事はたまたまです。悪しからず＞＜ webcre8は一応webデザイナですが、プログラミングは学生のころ勉強させられたりしました(そしてソッコー挫折)。そして何よりこれから触っていかなければならない分野でもあります(と言ってもJSかPHPまでにしておこうと思ってますけど)。 あとはCSSなんかでもフレームワークとかあるじゃないですか。こういうものの名前って、なんかすごいかっこ良さ気な名前とかついてません？ブラウザでもsleipnirとか。あとなんか何故それ？みたいな変な名前とか。 気になったのでそういった変わった固有名詞を冠したものの名前の由来、意味を調べてみました。一応、一見全然関係ないだろ！みたいな単語や全くピンとこないものに絞ってます。残念ながらそれらがどのように使われるものなのか、そもそもwebcre8自
[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」
大したものではないんですけど、jQueryの直書きに慣れ親しむ為に自分で前から欲しかったものをプラグインにして作ってみました。 ol要素の通し番号の種類 olにつける通し番号のバリエーションには、HTML側からだとtype属性で普通の数字、ローマ数字(小文字or大文字)、アルファベット(小文字or大文字)が指定できます。詳しくは以下のHTML5.jpのページで。 ol 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP そして次にCSSの方からは何が出来るかですけど、これは結構種類がありますね。 スタイルシートリファレンスから参照しますと黒丸、白丸、黒四角等の定番の他、0つきの数字、漢数字、果てはヘブライ語、グルジア語なんてのもあるようです。 list-style-type－スタイルシートリファレンス ①、②がない？ でもなんで①とか
![[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」](https://cdn-ak-scissors.b.st-hatena.com/image/square/161bc62a98ab9bbdd056e7eceacde579662f12ed/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F06%2Fjquery-orderd-list-01-150x150.png)
私がweb制作でよく使うサイト47+α 作業ごとリスト
web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA - WEBCRE8.jp
