タグ

ブックマーク / webcre8.jp (17)

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

    コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca

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

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

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

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

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

    考える。 WEBCRE8.jpによるweb制作やデザインについての考察を 書き綴っていくカテゴリです。

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

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

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

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

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

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

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

  • [HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者

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

    [HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
    nabinno
    nabinno 2013/03/23
    リンク

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

    角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての

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

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

    スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ なんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ 本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。 タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考

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

  • [ブログ]SEOに強い、Googleサービスで誰でも出来るコンテンツの作り方2つ

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

    [ブログ]SEOに強い、Googleサービスで誰でも出来るコンテンツの作り方2つ

  • ここ数年でのGoogleの検索結果(SERPs)の大きな変化と地味な変化

    Google便利ですよね Google先生にはいつもお世話になっています。最近はどんどん進化していて、検索結果だけでもかなりの情報が分かるようになっています。Googleのいいところはそういう便利さだけでなく、Doodleみたいなものや変な動き等、遊び心を仕込むのも忘れないところですね！ Googleのなんかあんまり注目されない面白いページ2つ こういうのとか。 で、そういう目立った動きもありますし、SEO担当者からすると普通の人なら気にしない(気にならない)地味ーな変化もあります。ていうか、調べてみると結構前からそうだったとか、驚くこともあります。そういうのをちょっと挙げてみます。 GoogleのSERPsにおける目立つ変化 まずは目立つ変化の方に触れてみます。 サイトリンク サイトリンクは、webサイトのトップページが検索結果に表示された場合、そのページのメインコンテンツと思われるリン

    ここ数年でのGoogleの検索結果(SERPs)の大きな変化と地味な変化

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

    調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。

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

  • ちょっとこの辺で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

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

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

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

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

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

    タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ

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

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

    文書構造って難しいですよね コーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。 エレメントの役割とタグの用途の正確な理解 コーディングしているときに何故迷うか。これは、 それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない 各タグの用途を理解できていない このいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです

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

  • 私がweb制作でよく使うサイト47+α 作業ごとリスト

    web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ

    私がweb制作でよく使うサイト47+α 作業ごとリスト

  • [webサービス]約一週間でGumroad周りに出来たサイト達 凄すぎるwebサービスの世界

    今月13日に急に話題になったサービスGumroad。その周りには物凄いスピードで関連サービスが作られています。このスピード感。情報とサービスを軽くまとめます。 webcre8では毎月話題になったサービスやコンテンツを特集しておりますが、今回そのまとめのブクマがGumroadと言うサービスの関連サービスで埋まってひどいことになってきたので別個に記事を書くことにしましたｗ もちろんwebcre8自身もwebクリエイタを目指して勉強中の身、こういった話は遥か雲の上ではあるものの、やはりワクワクしながら聞けてしまう話です。 https://gumroad.com/ Tech Crunchの以下の記事で伝えられたサービスです。今月話題にもなったPinterestのメンバーが作ってる～とか19歳のデザイナが起業して～とかもう色々ちゃんと聞かせて欲しいことがタイトルの時点でモリモリなんですがｗ Pint

    [webサービス]約一週間でGumroad周りに出来たサイト達 凄すぎるwebサービスの世界
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.