皆さんはハッカソンというイベントに参加したことがあるでしょうか。「なんだか難しそう」「エンジニアのイベントじゃないの？」という人、ちょっと見てみてください★ このブログの読者の人はどちらかというとデザイナーやコーダーの人が多いと思いますが、今まで皆さんはハッカソンと呼ばれるイベントに参加したことがあるでしょうか。 私は今まで仕事としてWebデザイナー、コーダー、Webディレクターという経験を経てきていますが、エンジニアと呼ばれるキャリアとは無縁です。それでもフロントエンドと呼ばれる技術には、必然的に接することになっていますが…。 で、そんな感じの私からしても、ハッカソンというイベントはまあ「エンジニアのイベント」「大変そう」みたいなイメージを持っていたわけです。 もともと実際このハッカソンという言葉は「ハック+マラソン」という意味の造語で、一カ所に人が集まって何かの制作に取り組むことを表し

今村さん(@s56bouya)のブログ、今村だけがよくわかるブログで「この記事はxx分で読めます」という表記をたまに見ますが、私は読めたためしがないです。という記事が書かれていたので、それに対して思ったことを書いてみたいと思います。 ご覧の通りこのブログにもそれがついているんですが、たまにこのパーツについては「お前の文長過ぎるよ！」といじられますw 結論としては、この記述を置いているのは明示する必要のある情報の一つだと考えているからです。またそれにより、閲覧者にはこの文章を読むかどうかの判断材料としてほしいという考えです。以下細かい背景とか考察です。 メリットとデメリット もし記事が3分程度(約1500文字)で読めるものであれば、閲覧者が「3分なら読んでみようか」という気持ちになって積極的に読んでくれるかもしれません。でも、ここで30分(約15000文字)なんて出てきたら「そんな長時間読ん

書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います

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

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 素人がwebサービスを作る 最近、というか結構前からはてなブックマークのアノニマスダイアリー(匿名で書ける日記で閲覧率も高いようです)を中心に、webサービスを何カ月で作ったというような記事を見かけるようになりました。 中にはなんでそんな事がわかるの…良く気付いたね…みたいな事もあって我々としては本当に素人か疑いたくもなりますよねｗ 素人といってもたまたまwebサービスを作ったことがなかっただけで、プログラミングの下地はあったという人もいるかとは思います。 今回はそうしたwebサービス制作秘話系記事をまとめてみます。ついでに、素人ではないにしても、同じように制作までの流れを明かしてくれている記事もいくつかピックアップしたので合わせてどうぞ。 webサービス制作してみた系記事まとめ 自分でW

http://zzhh.jp/ ゼゼヒヒは、生活における様々なことについて賛成か反対か、どちらがいいか等の決とその理由を投稿する生活に関する投稿サイトです。 SoundGator ジャンル：音声 種別：素材サイト SoundGatorは、フリーで効果音を視聴・ダウンロードし制作に使う事が出来る音声に関する素材サイトです。 楽しいBADUIの世界 ジャンル：デザイン 種別：情報サイト 楽しいBADUIの世界は、世の中にある使いづらいUIのものを紹介するデザインに関する情報サイトです。 ブコメヨム！ ジャンル：情報収集 種別：webサービス ブコメヨム！は、はてなブックマークで話題になった記事のブックマークコメントを手軽に読める情報収集に関するwebサービスです。 paprika　images ジャンル：写真 種別：素材サイト paprika　imagesは、カメラマンが撮影したあまり出回らな

http://camp-fire.jp/projects/view/601 求めた支援の概要 このプロジェクトは支援成立目標額が300000円、支援の募集期間は33日でした。この額はCAMPFIREのプロジェクトとしてはそう大きな額ではない部類に入るものの、私個人にとっては当然大金です。 去年の12月に販売した第一版は自費で制作したものの為、大した数が作れませんでした。今回はそのとき苦しんだ、予算の少なさから来る制作個数の制限を打破するためのプロジェクト応募でした。 支援の成立 先週までは目標金額の半分までしか集まっておらず全く成立する見込みのなさそうな状態でしたが、終わってみれば最終日の前日、最終日とでその残り金額全てを皆さんからご支援頂くことが出来ました。 成立してからも、その勢いのまま支援が入り続け、最終的には支援人数述べ54人から、合計328000円もの支援を頂くことになりました。

http://www.asial.co.jp/ アシアル株式会社は、HTML5、PHP等を得意とするシステム系の制作会社。最近はブラウザー上で動く、HTML5とJavaScriptで動くスマートフォンアプリ開発が出来るMonacaというサービスが注目されています。 取り組みとしても私の活動と親和性が高く、私も今後これでHTML5に関連したアプリを作ろうと思っています★ この機会を与えてくださったアシアルの岡本さんにこの場を借りてお礼を申し上げます。 CodeIQ https://codeiq.jp/ CodeIQは、株式会社リクルートキャリアの運営するWebサービスです。 CodeIQ（コードアイキュー）とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。ということで、もちろんHTML5についての問題も掲載されています。 こちらもテストやクイズの様な形式でweb制作

考える。 WEBCRE8.jpによるweb制作やデザインについての考察を 書き綴っていくカテゴリです。 ものを作ること、楽しいです 私は趣味でも仕事でも、ものを作ることに楽しさを感じています。ゲームだったり、絵だったり、ポスターだったり粘土細工だったり。仕事になっているのはweb制作だけですが、何かを発想してそれを思い通りの形にする、人のイメージを具現化して想像通りだと喜んでもらう、というのは他の何にも代え難い楽しさがあります。 そう思えることばかりだとは限らない ですが、中には自身が生産性を感じられないものを作ることもありますよね。これをやったところで、この成果はどこで役に立つのか。 また、縁の下の力持ち的な働き方には形のある実績がつかなかったり、明確に「これのどこを作った」と誇りを持つことが出来ない場合もあります。 反復 AさんとBさんは同じ額の時給をもらい、同じような仕事をしています

先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、

http://b.hatena.ne.jp/ はてなブックマークがリニューアルされ、ユーザーやweb制作者から色んな声が上がっていますねー。私はそれほどディープに使ってはいませんが、ブックマーク・検索・それの活用に便利なサービス5つ – WEBCRE8.jpの記事で紹介したようにソーシャルなタグ付けの支援として使ったり、アクセス流入元としてもなくてはならないサービスだと言えます。 あっさり今風に デザインはPinterest風と言いますか、TOPページのホットエントリを除くと、記事リスト部分にMasonryっぽいレイアウトを採用しています。見た目にもこぎれいになって、なんというか私的にはMS Ｐ ゴシックからメイリオに変わった時の様な雰囲気を感じました…わかりにくいですねｗ 効果としてはテキストを行で見ていく上から下に向かう視線を、ページ全体に分散させることが出来ると思います。 一度に目に

(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使

WEBCRE8.jp > 作る > 新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに！ #HTML5KARUTA

なぜブックマークするのか 皆さんもwebで読んだり興味を持ったwebページを、自分なりの理由や線引きの元にブックマークしますよね。 でもそれを後で活用できている人ってどれくらいいるのでしょう。せっかく一瞬とは言え作業をしているのですから、何かの役に立てないと意味がないですよね。まず、どういった理由でブクマするのか、ちょっと考えてみます。 ググっても見つからない時の為の保険 大抵の場合、記事のタイトルや概要を覚えておけば、本当はブクマする必要すらないのかもしれません。webcre8がブクマし忘れて後々困った！と思うのはやっぱり英語の記事やチュートリアル、素材を探すときですかね。単語だけだと色々引っかかって見つかりません…。 後で読み直す為 しっかり読んでないけどあとでもうちょっとちゃんと読みたい、と言うようなものです。結局読み返さずじまいの記事も多いと思いますけど…。まあそれはさほど必要のな

webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日本語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですｗ HTML5に関する国内のサイトや情報源をまとめました と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英

リクルートから蜷川実花さんの写真っぽいエフェクトをかけるiPhone用カメラアプリがリリースされましたが、アレっぽいのをPhotoshopでやってみましょう。 以前も勢いでPhotoshopのチュートリアル記事を書いてます。…ていうかこういうネタ的な実用性の微妙なチュートリアルしか作りそうにない気もします…ｗ [ネタ]人物の画像にろくろを合成するPhotoshopチュートリアル 早速手順の方に行ってみましょう。

はじめに webcre8は毎日楽しくブログのことを考えています。ときには制作そのものより楽しくなってしまうほどにです…！ｗ 仕事柄なのか普段から仲良くさせてもらっている人たちもやはりwebに興味のある人が多く、その中にはブログを始めたいと言う人も結構います。…そして、色々考え込んじゃってなかなか行動に移せない人も多いんですよね。 webcre8自身もそうでしたし、ブログを始めてそれほど経っているわけでもありません。なので説得力がどの程度あるかは分かりませんが…この記事ではそういう人たちに向けて、どのようにブログを始めればいいかをwebcre8なりに書かせてもらおうと思います。もしかしたら超詳しい人とか遠い存在な人が書くより、私のように身近だったり普通の人が書いた方が自分と重ねやすいかもしれないですし！ なお、この記事はどちらかというと元々web制作の仕事をされていたり、勉強中の人を想定して

調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指

元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ