［雑談］フリーランスになって一年くらい経ちました
アドベントカレンダー、参加しまくってますw 今回はフリーランスについてのカレンダー。 フリーランス Advent Calendar 2014 – Adventar なんとか生きてます 去年の中頃、勤めていた会社をやめました。それまでもいずれやめる、みたいなことを周りには言っていたわけですが、やっとという感じでした。別に機が熟したわけでも準備ができたわけでもなく、何の準備もなく夏頃にはやめたいなーと思っていて、実際に気付いたら夏だったのでやめました。 私は別にフリーランスに憧れを抱いているわけでもなかったですし、会社勤めも嫌いじゃありません。正直なところ、今でもタイミングさえ良ければ誘ってもらった会社にほいほい入っちゃいそうなレベルです。まあそんな会社そうそうないと思いますが。 今はWEBCRE8の屋号で知人からHTMLコーディングやWebサイト制作の仕事をもらったり、雑誌やWebメディアへ
バイラルメディア運営者やWebライター、ブロガーにも考えてほしい引用や紹介のこと
バイラルメディア叩きみたいな話題が一巡りしたところで今更こんなタイトルの記事ですが、ちょっとそういう流れからは離れたところで書きたかったので寝かせてました。 WEBCRE8.jpでは前からたびたび引用という行為を話題にして記事を書くことがあり、以前からの読者さんにはまたかという印象を与えるかもしれませんw でも書こうと思いますー。タイトルの通り、メディア（特にバイラルメディアとかですけど普通のメディア）の運営者やWebで文章を書く人にはやはり考えてほしい話しです。 読者に有益な情報やエンターテイメントを提供し、それにあわせて関連する事業や団体の活動を知ってもらったり広告収入を得るといったメディア運営にとって、他者の取り組みを紹介するということは大きな役割の一つだと思います。ですが、そうした取り組みにはときに読者（つまり未来の顧客）から反発を生む紹介のしかたや、コンテンツの制作者に嫌われてし
ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14
2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★
[イベント]8月11日に新宿WAVEでHTML5KARUTAのカルタ大会を行います - WEBCRE8.jp
改めまして告知です。8月11日にWebデザイン・プログラミングスクールWAVE新宿本校でHTML5KARUTA大会を行います。HTML5を楽しく学びたい方はふるってご参加ください★ 先日[イベント]7月14日に新宿 WAVE で HTML5KARUTA のカルタ大会を行いますという記事を書いたのですが、諸事情で延期になってしまいましたｗ 今回改めてイベントを行いたいと思うので、お暇な人は遊びに来てみてくださいー！ 販売とリターン遅れててすみません… それと、カルタの支援に対するリターン、そして販売の方もちょっと遅れてしまってます。私の段取りの悪さがたたって締まって申し訳ない限りです。この場を借りてお詫びさせてもらいたいところです…。もうしばらく！お待ちください。 イベント概要 というわけで、イベントを行いますが内容は以下同じです。日にちだけ変更されている感じなので以下同文って感じなのですが
![[イベント]8月11日に新宿WAVEでHTML5KARUTAのカルタ大会を行います - WEBCRE8.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/590eec662af499d655fbb07549289664c8395fc9/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F12%2Fevent-html5-karuta-02-150x150.png)
[Web制作]お昼に盛り上がったWebデザインや情報発信についての雑談
比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 お昼からTwitterで直接は話すことなく、なぜかWeb制作の話題でちょっと盛り上がっていたのでツイートをつまんでみます。 今Webではデザイナーにもフロントエンドだったりサーバーサイドだったりの技術が求められてる風潮があるけど、ガチでこの人にならデザイン面で全てを任せられるって人に頼むとなると、その人にはデザインに専念していいものを作って欲しいと思うような気がする。知っとくに越したことはないけど。 — 優 (@glatyou) June 22, 2013 だから「デザインだけじゃこの先生き残れないよなー」と思って他の技術を身につけようとしている人は自然とデザインで突出することから離れていくような気がする。周りの人に「これはこの人に任せて置けば間違いなし」と思
![[Web制作]お昼に盛り上がったWebデザインや情報発信についての雑談](https://cdn-ak-scissors.b.st-hatena.com/image/square/dca34869766364ee2b61602d1a73098e1a58d023/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F06%2Fwebdesign-light-conversation-01-150x150.png)
[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います
![[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e8c9c98b8c210bbed0a0d39aed243119c1eba7/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Ffont-six-stance-11-150x150.png)
[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)
[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)](https://cdn-ak-scissors.b.st-hatena.com/image/square/778ae00a3dda92b39324406dab3406d3736f6df8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
[web制作]約2年間ブログを続けて得たもの、失ったもの
考える。 WEBCRE8.jpによるweb制作やデザインについての考察を 書き綴っていくカテゴリです。 ここに書くことは私がブログを運営して実際に得たものです。これらのものは一介のweb担では得られなかったでしょうし、今も私がブログを書くモチベーションになっています。 また、HTML5KARUTA等の他のコンテンツ作成で得られたものや、Twitter単体で得られたものは極力除きます。あくまで誰もがブログを始めた場合にも得られそうなもの、ということです。まあTwitterはなくてはならない存在ですが。 ブログをどう始めたらいいか分からない人へ。目的とテーマ – WEBCRE8.jp ちなみにこのような記事も書いています。これはブログを書くことのスタート地点について書いた記事です。 自分のメディア メディアと言うほどのものではまだありませんが、私がブログという存在に一番求めているものはこの自分
![[web制作]約2年間ブログを続けて得たもの、失ったもの](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd6d0444bf23637ce0b763a690ce7f7f8a5e40f8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fcreative-three-adoration-01-150x150.png)
HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた
昔からサイト自体も考え方も好きで何かの機会に使ってみたいと思っていた「HTML5 Boilerplate」を、ようやく触ってみました。出来る事とか内容を解説します。 http://html5boilerplate.com/ HTML5 Boilerplateは、web上で利用者が必要な機能を選択した上で、その要件を満たすHTML、CSS、.htaccess、favicon等の各種ファイルをダウンロードできるHTML5のフレームワークです。 実はポップ？なデザイン(いまはそうでもなくなっていますが、前は★マークの目立つデザインとレトロな配色で、親近感を持っていましたｗ)と考え方がすごく気に入っていて常々使ってみたいと思っていたんですが、全く使い機会がなくてですね…ｗ HTML5 Boilerplateの特徴 何も考えずにサイトトップのダウンロードボタンをダウンロードするだけでも全然良いと思い
[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで
![[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者](https://cdn-ak-scissors.b.st-hatena.com/image/square/3343a483084de927c8c30adc27a8dcb2562b73d2/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fsemantic-html-reason-01-150x150.png)
スルーされないクリエイティブ ― 受け手にほんのちょっとだけ頭を使わせよう
http://adsoftheworld.com/ こちらは世界の広告を集めたサイトです。評価が高いものを見るとやはり、ちょっとした仕組みのもとに作られているものが多いです。 こういった広告は、言葉ではなく視覚的な問いかけを使う事で受け手の思考の一部をプロダクトに関わらせることを試みているわけです。 一つ言えるのは、その答えに辿りつくのが困難であればあるほど間口は狭くなるが印象が強くなり、簡単であればあるほど誰しもに伝わるとともに、印象は浅いものになるだろうという事です。 問いかけは面倒くさい そしてこの問いかけは、受け取る側が問いかけられていると感じれば感じるほど敬遠されます。上記の様な広告はそのビジュアルを見て受け手が自発的に問いに取り組むから良いのであって、例えば看板にテスト問題が書いてあっても取り組む人はわずかでしょう。…まあそれはそれで面白いですけどｗ ものづくりは受け手との対話
[クリエイティブ]「良いコンテンツ」と言われるものが持っているモノ
良いコンテンツを作ろう！ 結論から言うと良いコンテンツとは、ユーザーが何かの目的の為に、ポジティブな意識でそのコンテンツのことをより長く考えたり、使ったりして関わってくれるものであると思います。 最近はSEOの世界でも「もっとも良いSEOは良いコンテンツを作ることだ」と言われ、企業の取り組みとしてもコンテンツ・マーケティングというものが注目されています。 そして基本的に良いコンテンツは、面白いものか役に立つものか、その両方です。 これは過去記事[クリエイティブ]私が意識している、無難かつ人の興味を惹き効果を最大化するコンテンツ制作のヒント – WEBCRE8.jpでも述べましたが、流行るコンテンツは大抵こうした複数の魅力を備えています。 同じ時間やタイミングで使われるコンテンツに勝つ WEBCRE8.jpは技術系のブログですが、同時に制作自体を楽しんでもらう、ブログを読むこと自体も楽しんで
![[クリエイティブ]「良いコンテンツ」と言われるものが持っているモノ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d50a2bd820db2f6aedeeee470753ec479aa58f30/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fwhats-good-contents-03-150x150.png)
【悲報】HTML5のタグが109個になってる…(またはdialog要素について)【今更】
こんにちは、webcre8です。今日は最近気付いた、個人的に非常に残念なことを書かなければいけません。 HTML5のタグは百八つまであるぞ…？ 私はかねてよりHTML5の仕様に正式に採用されているタグは108個である、という事を記事等で報告していて、ハッシュタグを使って色々ツイートもしていたんですが…。 HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― – WEBCRE8.jp ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！ – WEBCRE8.jp しれっとdialogが追加されてる 最近何気なくHTML5.jpを覗いてみてみたところ2012年12月17日のCandidate Recommendation(勧告候補)に対応していて、おおーと思いながら眺めていると…。 そこにはdialog要素の項目が。 http:
[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デザイナーである彩さん(@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)
[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方
http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。 今まで考えていた根拠の薄いコーディングルール 私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。 入れ子の同じ階層にブロック要素とインライン要素を置かない 具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。 <body> <div id="container"> <header id="top
![[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方](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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Web制作の最新常識」で紹介したデザイン系Webリソースリンク集
[デザイン]各国の模様や柄の名前、パターン素材を探すとき役立つデザイン用語まとめ![[デザイン]各国の模様や柄の名前、パターン素材を探すとき役立つデザイン用語まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea1c6f1102f2de8176e6dd8295eaa3b1b0079b3b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F07%2Fname-graphic-pattern-02-10-150x150.png)
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/232c41c1ad9ba1ab348c9a84db4d1d95780fb78b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F06%2Fdesign-gradation-color-01-150x150.png)
