Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
[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サービス制作]「○○がwebサービスを作ってみた」系記事まとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 素人がwebサービスを作る 最近、というか結構前からはてなブックマークのアノニマスダイアリー(匿名で書ける日記で閲覧率も高いようです)を中心に、webサービスを何カ月で作ったというような記事を見かけるようになりました。 中にはなんでそんな事がわかるの…良く気付いたね…みたいな事もあって我々としては本当に素人か疑いたくもなりますよねｗ 素人といってもたまたまwebサービスを作ったことがなかっただけで、プログラミングの下地はあったという人もいるかとは思います。 今回はそうしたwebサービス制作秘話系記事をまとめてみます。ついでに、素人ではないにしても、同じように制作までの流れを明かしてくれている記事もいくつかピックアップしたので合わせてどうぞ。 webサービス制作してみた系記事まとめ 自分でW
![[webサービス制作]「○○が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デザイン]規則性と不規則性を使いこなすという記事を書いたんですけど。 この記事は、基本的に人の目は規則性のあるものに安心や調和、洗練された印象を受けるので規則性にしたがって整ってた方がいいんだけど、上手いタイミングでそれを外したりしないと印象にも残らないし面白くないものになるし、個性も出せないよねという話でした。 ちなみに規則性の効果については以下の記事でも述べています。 [フォント・デザイン]水平・垂直・傾斜・円弧・不規則 – WEBCRE8.jp 自由なようでいて法則を持ったもの で、なんとなく、普段の制作で自分の発想に基づき規則性から外れた不規則性を作ったと思って
ゴールデンウィークに試そう！！ 2013年上半期webサービス100連発！！
http://zzhh.jp/ ゼゼヒヒは、生活における様々なことについて賛成か反対か、どちらがいいか等の決とその理由を投稿する生活に関する投稿サイトです。 SoundGator ジャンル：音声 種別：素材サイト SoundGatorは、フリーで効果音を視聴・ダウンロードし制作に使う事が出来る音声に関する素材サイトです。 楽しいBADUIの世界 ジャンル：デザイン 種別：情報サイト 楽しいBADUIの世界は、世の中にある使いづらいUIのものを紹介するデザインに関する情報サイトです。 ブコメヨム！ ジャンル：情報収集 種別：webサービス ブコメヨム！は、はてなブックマークで話題になった記事のブックマークコメントを手軽に読める情報収集に関するwebサービスです。 paprika images ジャンル：写真 種別：素材サイト paprika imagesは、カメラマンが撮影したあまり出回らな
[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)
[web制作]今、制作会社の(特にスタッフ持ち回りの)ブログがアツい
たくさんのブログのお世話になっています 私はweb制作の知識を、webでの検索やRSSで受信することをメインに集めています。本も読みたいんですけど、なかなか…年に大した量を読むことはありません。 web制作を学び始めて3年以上経ちましたが、最近特に気になるのは読んでいるブログに、制作会社のスタッフ持ち回りブログが増えてきたなーという事です。 好きな企業ブログの魅力 さて、普通の個人やフリーランスの人がやっているブログや企業名義で情報を発信しているブログと比較して、こうした(特に持ち回りブログの)見どころとは何でしょうか。 何かしらのインセンティブを用意していてスタッフの記事を書く意欲が高い、企業のワークフローに属しているのでクオリティーが高い、といったことはフリーランスの人や企業名義のブログでも同じだと思うので置いておきます。 更新頻度が高い まあ、私もやる気だけで企業ブログの更新頻度に追
デザインを言語化しようよって話
私は理詰めも、感情的な訴えかけもどちらも好きで、シンプルでミニマルな機能重視のデザインもカッコいいと思いますが、五感を刺激し、相手を楽しませるグラフィカルでインタラクティブなデザインも好きです。飾るのがデザインではないと言われても、やっぱり装飾の力も信じています。なんにせよ、それを期待されているならやらないといけないですしねｗ 更に言えば私はフラッシュサイトも大好きです。見たいサイトなら重かろうがなんだろうがワクワクしながら待ちます。映画上映の前の様に。 バナーならバナーの絵柄や文字、キービジュアルなら何を持って見る人の意識を引きつけるか。アニメ―ション、世界観、その全てもやはりデザイナーの腕の見せ所でもあり、webサイトへの没入感、愛着を持たせると思うのです。 そう思うからこそ、私はデザインに取り組む人、色んなスキルや価値観を持っている人と、デザインが好きな人と話がしたい。そう思っていま
ここ一年くらいで参考になったデザイン/webデザインに関するスライド10
スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ なんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ 本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。 タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考
[CSS]擬似要素の実用的な使用用途のまとめ
(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使
![[CSS]擬似要素の実用的な使用用途のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a9afecaf0f148dfae555dc1a6b7979e3fdba29c/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-pseudo-elements-01-150x150.png)
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました
本日HTML5の各タグを遊びながら覚えられる「HTML5KARUTA」を公開しました。これがどういうモノかを紹介します！ 9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★ http://roadstohtml5.com/html5karuta/ HTML5KARUTAは、日本の遊びカルタというゲームを通してHTML5のタグを覚えようという主旨のゲームです。 読み札にはHTML5の各タグの説明が書いてあります。絵札にはタグの名前自体があるだけです。タグの説明を聞いて、それが何のことかわかったら札を取る。日本人にはおなじみのルールですね！最近の若い人が知っているのかは知りませんけど…ｗ HTML5KARUTAを作った動機 まずなぜこれを作った
![[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed4b0ae9d3cd3869de4fb9a3f429e329064fe56b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F12%2Flaunch-html5-karuta-04-150x150.png)
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
[ブログ]webから得たものをwebに返すということ
11月、これまでの感謝を綴ります 以前記事のどこかで「ブログを書くのはwebから得たものをwebに返すことだ」みたいなことを言ったことがありますけど、その頃はまあ大それた考え方かなとも思ってたんですね。でも最近、わりと真面目にそんな風に思ってます。先輩に飯をおごってもらった分を、その先輩にではなく後輩に同じ事をすることで応えるような。 11月はネタ帳のやまださん( @Yamada_nt )の制定した「好きなブログを告白する月」らしいので、それにちなんで、これまで読んできて特に何かのきっかけになったブログやお世話になったブログを紹介していこうと思いまーす。 ブログをはじめる前 まずはブログをはじめる前。ここに挙げた以外にもコリスやDesignWalkerはやはりよく読んでました。 ホームページを作る人のネタ帳
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 入門]実用を意識した最小単位からの文書構造チュートリアル
文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているときに何故迷うか。これは、 それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない 各タグの用途を理解できていない このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです
[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}
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](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)
