Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの - WEBCRE8.jp

2015/01/06 279 users コーダー コマンドラインツール npm 門前払い 実務

コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment... 続きを読む

WebフォントのCSS指定2014年度版とこれまでの歩み - WEBCRE8.jp

2014/05/22 146 users Webフォント メジャーどころ 経緯 実務 Web制作

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 考える まとめる 会う 作る 作る 作る 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない... 続きを読む

[SEO]大手サイトもやっているカテゴリーを使った内部リンク構築術 - WEBCRE8.jp

2013/07/24 390 users SEO カテゴリー 大手サイト

Webサイトを上位表示させるためにはコンテンツの質が良いことは当然として、外部リンクの獲得、近年ではソーシャルの活用等も重要になってきています。 ですがそれだけではなく、特にWebサイトの設計段階においては検索エンジンによるWebページの評価の仕組みを理解して、適切にWebサイト内のリンクを構築していくということが重要です。 今回はその内部リンクについて、どういう内部リンクがその機能を果たしつつ検... 続きを読む

[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した - WEBCRE8.jp

2013/06/19 576 users グラデーション ダサ 議論 考察 角丸

以前書いた角丸に関する考察のグラデーション版です。Webデザインで角丸とともに多用されるグラデーション。それにどんな意味があるのか、やり過ぎると何故ダサいのかを徹底的に考察しました。 iOS 7のデザイン変更に伴う議論 [...] 続きを読む

[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス - WEBCRE8.jp

2013/05/28 276 users フォント 書体デザイナー クリエイター 長年 アドバイス

書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてき... 続きを読む

[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した - WEBCRE8.jp

2013/05/22 102 users Web制作 要素 Webコンテンツ 可読性 うち

最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。 可読性とコンテンツ まず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち... 続きを読む

web制作系の気になるセミナー/勉強会等のイベントブランド - WEBCRE8.jp

2013/05/21 107 users セミナー Web制作系 勉強会 フロントエン Webデザイナー

私のアンテナの低さと指向性の問題で紹介しきれていないイベントもあるかと思いますがご容赦ください！もしオススメのものとかありましたら教えてもらえると幸いです★ セミナーに行こう！ 皆さんはweb制作系の勉強会やセミナーに行ったことがあるでしょうか。私は以前は何となく気後れして全然参加してなかったんですが、これが行ってみるとまた行きたくなります！ 私はWordPress、webデザイナー、フロントエン... 続きを読む

Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました - WEBCRE8.jp

2013/05/20 103 users Sublime Text2 Sass Zen-Coding

永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…！ どうもハマれなかったSublime Text 私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに... 続きを読む

[webサービス制作]「○○がwebサービスを作ってみた」系記事まとめ - WEBCRE8.jp

2013/05/16 296 users WEBサービス アノニマスダイアリー 記事まとめ 匿名 素人

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 考える まとめる 会う 作る 作る 作る 素人がwebサービスを作る 最近、というか結構前からはてなブックマークのアノニマスダイアリー(匿名で書ける日記で閲覧率も高いようです)を中心に、webサービスを何カ月で作ったというような記事を見かけるようになりました。 中にはなんでそんな事がわかるの…良く... 続きを読む

デザイン怖い話「これは本当に私の頭で考えて生み出されたものなのか？」 - WEBCRE8.jp

2013/05/13 175 users

これはどうでもいい話なんですけどなんかこう考えると怖いなー、と思った話です。あと念のために言っておくと「パクリ」とか「本当に新しいアイディアなんてない」とかそういう話ではないです。 規則性と不規則性を使いこなす 先週[webデザイン]規則性と不規則性を使いこなすという記事を書いたんですけど。 この記事は、基本的に人の目は規則性のあるものに安心や調和、洗練された印象を受けるので規則性にしたがって整っ... 続きを読む

ゴールデンウィークに試そう！！ 2013年上半期webサービス100連発！！ - WEBCRE8.jp

2013/05/02 154 users ゴールデンウィーク

http://zzhh.jp/ ゼゼヒヒは、生活における様々なことについて賛成か反対か、どちらがいいか等の決とその理由を投稿する生活に関する投稿サイトです。 SoundGator ジャンル：音声 種別：素材サイト SoundGatorは、フリーで効果音を視聴・ダウンロードし制作に使う事が出来る音声に関する素材サイトです。 楽しいBADUIの世界 ジャンル：デザイン 種別：情報サイト 楽しいBADU... 続きを読む

正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ

2013/03/21 153 users ネコメシCEOブログ 正しいHTML 目的 セマンティック

2013-03-21 正しいHTMLを書く目的はただ一つ [HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉し... 続きを読む

[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した - WEBCRE8.jp

2013/02/27 398 users 角丸 デザイン 理由 ナナメウエ suzukisan_

角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書い... 続きを読む

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方 - WEBCRE8.jp

2013/02/25 116 users HTML ブロック要素 インライン要素 HTML5 入門

http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。 今まで考えていた根拠の薄いコーディングルール 私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いていま... 続きを読む

デザインを言語化しようよって話 - WEBCRE8.jp

2013/02/21 121 users 言語化 デザイン 理詰め グラフィカル ミニマル

私は理詰めも、感情的な訴えかけもどちらも好きで、シンプルでミニマルな機能重視のデザインもカッコいいと思いますが、五感を刺激し、相手を楽しませるグラフィカルでインタラクティブなデザインも好きです。飾るのがデザインではないと言われても、やっぱり装飾の力も信じています。なんにせよ、それを期待されているならやらないといけないですしねｗ 更に言えば私はフラッシュサイトも大好きです。見たいサイトなら重かろうが... 続きを読む

ここ一年くらいで参考になったデザイン/webデザインに関するスライド10 - WEBCRE8.jp

2013/02/19 470 users webデザイン 参考 デザイン

スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ... 続きを読む

[CSS]擬似要素の実用的な使用用途のまとめ - WEBCRE8.jp

2013/02/04 223 users CSS 擬似要素 使用用途

::before、::after…便利だけど敬遠していた人もいると思います。IE6,7のシェアの減少、スマートフォンの流行によって使いやすくなってますよー★ (個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、ずっと考えているブログのリニューアルのことを考えている... 続きを読む

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ - WEBCRE8.jp

2013/01/22 1029 users 暗黙 CSS HTML

しかし、英語の場合は小文字のgやy、j等、このベースラインから下にはみ出すものがあります。通常、文字を打ちこんだ場合このベースラインはデフォルトスタイルシートでvertical-align:baselineに設定されています。つまり何も考えなくても常にテキストの下にはgやyの為に常に隙間があいているという事になります。 しかし、このプロパティーは別にその行のベースラインそのものを動かすわけではなく... 続きを読む

[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました - WEBCRE8.jp

2012/12/18 110 users HTML5KARUTA コンセプト http タグ HTML5

本日HTML5の各タグを遊びながら覚えられる「HTML5KARUTA」を公開しました。これがどういうモノかを紹介します！ 9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★ http://roadstohtml5.com/html5karuta/ ... 続きを読む

やさしさゴシックの魅力-可愛くて温かい商用可フリーフォント-　#LOVEFONT Advent Calendar 2012 ｜ Kana-Lier　カナリエ

2012/12/05 674 users フォント Kana-Lier 勇気 ゴシック カナリエ

やさしさゴシックの魅力-可愛くて温かい商用可フリーフォント-　#LOVEFONT Advent Calendar 2012 今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。... 続きを読む

ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！ - WEBCRE8.jp

2012/12/03 768 users 最終草案 タグ 全部 HTML5 厨二心

HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外... 続きを読む

HTML5の学習に役立つ(主に)日本語のサイトまとめ2012 - WEBCRE8.jp

2012/10/24 705 users 学習 HTML5 大抵 殆ど 日本語

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 考える まとめる 会う 作る 作る 作る webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語... 続きを読む

[HTML5 入門]HTML5の略された49タグの語源全てを調べた - WEBCRE8.jp

2012/10/11 438 users HTML HTML5 入門

タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけま... 続きを読む

[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル - WEBCRE8.jp

2012/10/04 143 users 最小単位 HTML5 入門

文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているとき... 続きを読む

[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ - WEBCRE8.jp

2012/09/12 178 users コンテンツ モデル HTML5 入門 ところ

こんにちは。結構HTML5のことが好きなのにも関わらずHTML5カンファレンスには行けなかったwebcre8です。悲しいけど前を向いていきます！ｗ イベントについては以下の記事でまとめられています。 HTML5カンファレンス2012の資料まとめ | Stocker.jp / diary いやー楽しいですよねHTML5。勉強していると、セマンティックなwebというものに自分がドンドン近づいているのを... 続きを読む