webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文

figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

で、実際にスマホ版を用意していないWebサイトであったとしてもPCサイトは大抵スマートフォンの画面サイズに合わせた形で普通に表示されるわけですが、サイト、端末によっては微妙に崩れたりしてしまっていることもあると思います。もうリニューアルする意義がない、もしくはいずれするけど今とりあえずこれだけは直したい！というサイトを持っている人のために症状別に解説、対処法を紹介したいと思います。 フォントが変わる まずは凡ミス的なものから。PCサイトではゴシック体で表示されていたものが、スマートフォンで見ると明朝体（とか丸ゴシックとか）で表示されるという場合ですね。 ただbody内のp要素にテキストを入れただけのものをブラウザーに表示させた場合、例えばPCブラウザーでは大抵ゴシック体で表示されますが、新しめのiPhoneでは明朝体、Androidの一部の機種では丸ゴシックで表示されたりもします。これはフ

文章において書かれてある内容が役に立つことか、面白いことかということは当然一番大事なことですよね。…一番大事なことですが、実際には情報というものにはそれをより良く、あるいは悪く見せてしまう本質以外の要因がたくさんあります。今回はこれについて考えてみました。 ちゃんと文章を書いているのにどうにも信用されない。同じ情報を伝えているのに、Aの文章が伝えることはちゃんと読まれていて、Bの文章は全く読まれないし読まれても伝わらない…こういう結果を生む要因を分解してみましょう★ ちなみに今回の話しは、あくまで読み始めた段階での伝わりやすさについて書いています。宣伝とかソーシャルとか、どうやって文章自体に触れるきっかけを作るかについては書いてません。 例えば伝わる可能性を上げる方法として[クリエイティブ]私が意識している、無難かつ人の興味を惹き効果を最大化するコンテンツ制作のヒントという記事を書いたりし

webcre8はインターネットで色んなサイトを見ています。分からないことをググったりは当然のこと、何か生活のなかで話題に上ったことがあると、とりあえず家に帰ってそれのPCサイトを見てみたりします。 そう言う場合、サイトに来た人はそのサイトに何があるか、どんなことが得られるかを分かった上で訪れますよね。 例えばそこにどんなに突飛なグラフィックが展開されていようと、重厚なフラッシュが流れようと、その先にはちゃんと求めている情報があると思っているわけですから、とりあえずそのままサイトを見続けますよね。まあ途中で止めちゃう人もいます。 webサイトにたまたまやってきた人はそこが何のサイトかを知らない ではたまたまやってきた人はどうでしょう。サイト名の添えられていないURLを踏んできた人。もしくはアクセスしたページの内容は分かっていても、そのページ以外にそこがどんなコンテンツを扱っているのか？そこが

私は理詰めも、感情的な訴えかけもどちらも好きで、シンプルでミニマルな機能重視のデザインもカッコいいと思いますが、五感を刺激し、相手を楽しませるグラフィカルでインタラクティブなデザインも好きです。飾るのがデザインではないと言われても、やっぱり装飾の力も信じています。なんにせよ、それを期待されているならやらないといけないですしねｗ 更に言えば私はフラッシュサイトも大好きです。見たいサイトなら重かろうがなんだろうがワクワクしながら待ちます。映画上映の前の様に。 バナーならバナーの絵柄や文字、キービジュアルなら何を持って見る人の意識を引きつけるか。アニメ―ション、世界観、その全てもやはりデザイナーの腕の見せ所でもあり、webサイトへの没入感、愛着を持たせると思うのです。 そう思うからこそ、私はデザインに取り組む人、色んなスキルや価値観を持っている人と、デザインが好きな人と話がしたい。そう思っていま

こうしたコンセプトというものはサイト内で一貫していてこそ意味があります。フラットならフラット、スキュアモーフィックならスキュアモーフィックなデザインを、そしてその加減を貫かないと、何が何だかわからなくなってしまいますよね。 そして統一したデザインのコンセプトというものはそのサイトの世界観を作りだします。それはそのままターゲットに、もしくはそのサイトがフィーチャーしているプロダクト等にしっくりくる雰囲気を持っているはずですし、デザイナーはそれを選んで使わなければいけません。 ごちゃごちゃしてしまって統一感のないデザインをしてしまったとしたら、それはデザイナーがそのサイトの世界観を頭の中で確立できていないということになります。

以前グラフィックパターンの柄やテキスタイルの名前まとめと言う記事を書いたのですが、それのパターンを実際に作りました。自作パターンを持ってない人はベースに是非★ 今回作ったのはPhotoshopのパターンファイル。拡張子は.patで、Photoshopのプリセットのpatternフォルダには初期設定のものが入っています。この辺は過去記事[Photoshop]ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう！で一通り説明しています。使い方が分からない人はそちらを参照してくださいね。 グラフィックパターンの名前を調べましたけど 以前書いた[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめという記事で、色んなグラフィックパターンや柄の名前を調べてみました。服飾やインテリア壁紙、ファブリック等に使われるこれらのパターンですが、webサイトに応用することでクールだったり、かわいらしい

約一週間ぶりのブログです、サボっててすみません！ Webサイトのアイコンやピクトグラムって、非デザイナーから見るとデザイン要素の中でも面積が小さいせいで軽んじられがちな感じがするんですけど、実はかなり奥が深いです。これをサイトに置くことで本来なら複数の文字で説明する必要のあることを利用者に直観的に理解させられます(もしくは補助として)し、単純に見た目の雰囲気を作り出すことも出来ます。 この記事では私がWebサイトにおけるアイコンやピクトグラムを作成するときどんなことを考えて作成しているのか、細かいことも含めて分解して書きだしてみました★ モチーフを選択する まずはそこにどんな意味のオブジェクトを置くのか、それを図柄で表せばそうであることが伝わるのかを考えます。 名詞や動詞、目的語の抽出 そのボタンや項目、オブジェクトにどんな意味や機能を持たせたいのか、それをキーワードにして抽出します。 例

SEOを意識してブログの記事やコンテンツを考える場合、皆さんはどうやってネタを出すでしょうか。SEOがわからなくても、ある程度コンテンツを戦略的に作ることはできます。 検索に引っかかるコンテンツを作る ブログの記事を考えていて、なんにも思いつかないとき、どうしていますか？webcre8は幸いなことにまだ書くことが思いつかないと言う現象に遭遇したことがないんですが…ｗ ブログをどう始めたらいいか分からない人へ。目的とテーマ – WEBCRE8.jp [クリエイティブ]私が意識している、無難かつ人の興味を惹き効果を最大化するコンテンツ制作のヒント – WEBCRE8.jp ブログの書き方に関してはこの辺の記事もどうぞ！ また、今ある記事へのアクセスを上げたいけどどうやったら上がるのか、サイトを盛り上げるために記事をどうすればいいのかって考えちゃうこともありますよね。 今回はこの二点についてちょ

Webサイトを上位表示させるためにはコンテンツの質が良いことは当然として、外部リンクの獲得、近年ではソーシャルの活用等も重要になってきています。 ですがそれだけではなく、特にWebサイトの設計段階においては検索エンジンによるWebページの評価の仕組みを理解して、適切にWebサイト内のリンクを構築していくということが重要です。 今回はその内部リンクについて、どういう内部リンクがその機能を果たしつつ検索エンジンに正当に評価されやすいのか、私の経験からその考え方をSEO初心者の方にも分かりやすく解説しようと思います。 内部リンク(Internal Link)とは 内部リンクとは、同じドメイン内から張られたそのドメイン内部のページへのリンクのことです。違うドメインから張られたリンクは外部リンク(External Link)といいます。 内部リンクの果たす役割 SEO的な観点で言うと、内部リンクは外

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

そして私が買いだと思うフォントをいくつか挙げてみます。あ、Copperplate Gothic以外に、ですねｗ Geometric Slabserif 703(Memphis) Lusian Square Slabserif(City) Stymie Bank Gothic Chianti Geometric 231(Cable) Lydian Bernhard Fashion Calligraphic 421(Codex) Cloister Black Dabida Parisian Thunderbird Tango ちょっと多いですかね…厳選してこれらのフォントがいい感じでした。 先日書いた記事[フォント]文字デザインの分類(欧文編)でも紹介したように欧文フォントはいくつかの分類で分けられますが、その中で言えばこのセットは特にスラブ・セリフのフォントが充実しているように感じました。

web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで

それではそれぞれのシーンについて、どのライセンスが有効なのか考えてみます。ちなみにこれについてはクリエイティブ・コモンズ以外のライセンスのことを[ライセンス]どれにする？制作者視点での目的別ライセンスの選び方で書いています。 「パブリックドメイン」 クリエイティブ・コモンズではありません。パブリックドメインについては前述の記事でも書いていますし、その他パブリックドメインのコンテンツは[webコンテンツ]パブリックドメインで使える音楽・画像・テキスト等まとめでも紹介しています。 これらは完全に著作権を保有する者が存在しない状態ですから、誰でも何の目的にでも使って良いことになります。素材、シェア、改変、再販売なんでもこいです★ 「クレジット表記義務のない著作物」 クリエイティブ・コモンズではありません。著作権表記をしなくてもいい著作物です。ただしクレジットを書かずに作られた二次著作物はもはや元

あ、我々とか言ってますけど私はそんなにたくさん作ってないんですけどねｗ 私は分類が好きなので、今存在する様々なwebサイトを分類してみました。 WEBCRE8.jpではwebサービスまとめの記事を書いたりしていますが、最近はサービスも多種多様すぎて、一口で何をするためのサイトですと説明がしにくいんですよね。 こうした言葉の相互の理解が得られていれば発注者と受注者の齟齬も起きにくいかと思うので、非制作者の方ともシェアしたりしてみてはいかがでしょうか。というか、どちらかと言うとweb初心者向けの記事になりますね。 思いつく限りをだーっと書いてみましたが、これが足りない、または変だなと思う所があったらツッコミをもらえると有難いです★ 出来る限り更新前提のページにしたいと思います！ ウェブサイト – Wikipedia ポータルサイト コンテンツ：なくても出来る 運営規模：まず使ってもらうのが大変

http://isoople.digi-popeye.jp/ これはiGoogleの様にRSSを受信してリスト上に表示してくれるサービスで、単機能のリンクや検索窓、ガジェットの追加こそ出来ませんが(お願いしますｗ)iGoogleの実用的なメイン機能であるRSS受信が出来ます。実はベータ版のころからこっそり使っていましたｗ 一応ベータ版の時とはCookieによるデータの管理だったのが、会員登録をしてユーザー情報をとっておくようになりました。それによって同じホームページを別のパソコンでも使えるようになりました。Cookieではさすがに心もとないですしねｗ iSoopleのちょっといいとこ見てみたい iGoogleの機能限定版なので不自由なところはあるにしても、iSoopleの方が勝っている機能があります。それは RSSで受信する記事の数を選べること タブ管理できること RSSの受信に特化してい

フォントの種類ってめっちゃめちゃありますよね。こんなもん当然一つ一つ覚えてられません！ ですが、フォントの種類がそれぞれどのように成り立ち、どんな目的があって作られてきたのかが分かれば、新しく知るフォントも体系立てて覚えることが出来るのではないでしょうか。そして、覚えることより、フォントを相応しい場所で使う、またはどこまで考える必要があるのか…それを判断する事が出来るようになるのだと思います。 というわけで、フォントがどのように分類されるのかザーッとまとめてみます。 フォントの時代、様式に関する分類 フォント、書体というものは文化とともに作られ、必要とされて生まれてきています。 …この章は一応必要だから書きますけど、調べているうちにほぼこの記事で完結しているというレベルの記事を見つけてしまったので、さらっと触れるに留めます(って思ってましたけど結局長いです)。 書体の分類 書体の世界 ブラ

年間500程度のwebサービス等を見てきて 私は去年の10月ごろまで「201*年*月のwebサービス・コンテンツ**(リリース・話題になったもの)」というサービスまとめ記事を書いていたのですが、11月から書いてません。わりと大変なわりにあんまりニーズがあるように思えなくなってきたというのもあって…。ネタは溜まってるんで、再開しようかな―とは思ってるんですけど。めんｄ(ry で、その中でも私はやっぱりまずサイト名に目が行くわけです。何を考えてこの名前にしたんだろう？あーなるほど、とそういう感じで考えてみてます。 その中で気にすべきだなと思ったことを軽くまとめてみます。 ユニークな名前かどうか 何はなくとも、とりあえず考えた名前で検索しましょう。これすらやってなさそうなパターンもあります。固有の名前にしましょうねーという事です。 私の中では、検索に出てこないサイトは存在しないサイトです…少なく

細かい性質などは気にせず、webで完結する、遊びやコミュニケーション、便利なサービス、ツールなどを集めています。必ずしもwebcre8自身が使える、と思ったものとは限りませんが、まずはこうして存在を知ってもらうこと、webcre8自身の学習のためまとめています。基本的に日本語で利用できるもの限定です。iphoneアプリ等のモバイル端末専用サービスは今のところチェックから外しています。 いやー蝶今更なんですが、webサービス紹介を再開します。再開といっても休んでいた期間を飛ばしては網羅性が薄れるのでちゃんと遡ってまとめていきますｗ 今更かもしれないですが、チェックし忘れてるものもあると思うので目を通すと良いと思いますよ！ｗ 2012年11月のwebサービス総括 2013年3月に総括もクソもないもんですがｗ この月の目玉としてはなんといってもJAYPEGとBASEでしょう。 JAYPEGは自分