作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
月１５万PVを生むブログをデザインしたときに徹底した７つの要素
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ブログを始める以上は、誰だって、出来るだけ多くの人に見て貰いたいものだ。 そこで、私はブログを始める前に、国内外の人気ブログを３０個読み込み、人気ブログに必須の要素リサーチをした。 そして、その中から、共通点を７つに絞り込み、実践した結果、ブログを始めてから３週間で１５万を超えるアクセスを得ることができた。 下図は、５月１日〜２０日までのアクセス解析だ。 そこで、本日は、私がブログを始める上で調べたブログデザインの７つの要素を全てご紹介する。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続け
Webサイトの品質をアップさせる便利ツール＆機能のまとめ | ベイジの社長ブログ
成熟市場においては、品質の高さでは優位性を築けなくなると言われます。しかし、だから品質にこだわらなくても大丈夫、と考えるのは早計です。裏を返せば、品質の高さが当たり前になっているため、少し品質が低いだけでブランドを大きく傷付けやすい環境になっているとも言えます。 そういった考えもあって、今年行っている当社のブランド再構築活動の中では、高い品質を担保するためのレギュレーションの整備に力を入れてきました。あわせて、当社として利用する品質を維持するためのツールや機能も改めて洗い出してみました。今日はこの内容を公開させていただきます。 JavaScriptエラーを無くす JavaScriptのエラーは、大きな問題が起こっていないように見えても、大事な機能が動かなくなったり、スペックの低いマシンで極端に挙動が遅くなったりすることがあります。各ブラウザのデフォルト機能で簡単にチェックできますので、エラ
ぶっちゃけWEBサイトっておいくらなの？って話 | Hal-Cana
先に言っとくけど仕事の合間にぱぱっと書いた記事だからあんまりアテにするなよ？ 「極端に低い単価や無料で仕事をしてはいけない単純な理由」 こういう記事が話題になっていたので、ふと気になりまして。 そもそもね、WEBサイトを制作してる側の人間が「どこまでが安価で、どこからが高価なのか」っていうラインを知らないんじゃないかなって思ったんです。 まあね、最初に結論は言っておくけど、そんなもんクライアント次第です。一概にどこからが高いとか安いとか、そういう話はできません。 ボレるとこからはとことんボレばいいんですよ。世の中そうやって回ってんだから。 もしくは、「ウチはページ単価○○円からです」っていう明瞭会計な制作会社もありますね。 個人的にお付き合いの多い某社などは、公式サイトに料金表も掲載されていて、とても良心的です。ほんとありがたいです。 まぁそれはいいんです。別に関係ない。 本題は
海外と日本｜僕らのWeb制作戦争のお話
オーストラリアに行っていた中学時代の友人が、現地のWeb制作会社で働いて、この度現地の差別的な扱いに嫌気がさして帰って参りました。 同時に、「じゃぁ一緒に語り明かそうぜ会」を開いたところ、8人のむさくるしい男と3名の天使が集い、決して合コンではない同窓会を開いたわけです。そこでは製造業をする人もいれば銀行の受付をする人など、様々な業種の人が集まったわけですけど、まぁ私としてはオーストラリアのWeb制作が気になったものでその辺を熱く語り合ったお話をまとめさせて頂きました。 当たり前ですが日本は大きく違う メンバーのなかでWebに関わる仕事をしているのは天使2名と男2名（私含む）という状況で、そのへんの話がどうしても盛り上がってしまったのです。 オーストラリアと言えばコアラですが、そんなことよりBOSSがすごいという彼（以下；銀メガネ）。 彼は私におみやげを用意してくれていたようで、変な人形の
WebサイトでPNGを使うのは非常識！？ | poyosicom
誤解を与えるタイトルにしてしまったので、訂正しました。ごめんなさい。 こんにちは@poyosiです。PNGを使いまくってコーディングしてますか？ 会社から「WebサイトでPNGを使うのはNGだからGIFにしとけ」とか言われたことないですか？ そうではなくても、「なんとなくPNG使うくらいならGIFにしといたほうが安心」という方もいるのではないでしょうか？ 今日は画像ファイルフォーマットであるPNGをWebサイトに使うのはどうなの？というお話をしたいと思います。 WebサイトでPNGを使ってもいいんじゃない？ 「WebサイトでPNGを使うのは非常識だろ」という事を言われたのですが、仕様書など特に取り決めがない限りでは、それは違うんじゃないかなと思っています。 私はWebサイトでPNGが使われることについては「どんどん使うべき！」と思っています。 そもそもPNGを使わないほうがよいと言われた理
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
ディレクターとは？Webディレクターなら覚えておきたい知識・技術、そしてスタンス / Maka-Veli .com
Twitterで話してたんですが、『ディレクター』って本当に微妙なポジションだなぁと感じました。 というか、そもそもディレクターって何でしょうね？ ディレクターと聞くと、まだまだ映画のディレクターの方が知名度高いのではないでしょうか。 そこから来て、やはり日本では、現場監督的な位置づけが多いんですかね。 Webディレクターは、プロジェクトを指揮・管理する役割が多いはずです。 ※だから決して偉いというわけではないです。あくまでも繋ぎをする作業者ですから、上下関係はありません。 Webディレクターの系統 Webディレクターは、大体「Web制作会社」「システム開発会社」「サービスプロバイダー系会社」「広告代理店」等に配属され、更に 営業寄り 企画寄り デザイン寄り システム寄り という具合で分かれると思います。 それぞれ活躍する場が違うので良いと思うんですが、 それに伴い、ディ
「所詮ホームページ」 |Webリテラシ |KAITOKU
巷で話題の4,550万円に乗じて 今回のように時折、公官庁のホームページの制作費は話題となる。 以前には某庁のサイトがビルダーでガチガチに作り込まれていて何かと懐疑的なクオリティであっても数億円などと言うものもあった。 今回の4,550万円は制作費とはされているがサーバーやらその辺が込みなのか、運営に関してはどうなのか、あまり情報が明確では無い。 個人的な経験上、利益はほぼゼロか、赤字である可能性も感じる。とは言え実際がどうなのか知らない。そしてこの記事ではそれを論じたいわけではない。 とは言え当然、Webに携わっていない方々にとっては、安易に税金を「そんなトコロ」に使うなどナンセンスであるという反応が起こるのはでそれで良いと思う。 一般社会からは「そんなトコロ」なのである。 今回は高いか安いかの個人感覚論ではなく。 今回論点としたいことは、この金額が高い安いでは無く、この記事に対
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
Chromeでフローチャートやマインドマップを簡単に作図できる LucidChartで遊ぼう!! - 週刊アスキー
『LucidChart』はブラウザー上でさまざまな図を手早く簡単に作成できる作図ツールだ。豊富なテンプレートを元に、さまざまなシェイプをドラッグ・アンド・ドロップで配置。シェイプどうしを線でつないだり色分けすることで、専用ソフトにもひけを取らない本格的な作図を行なえる。
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
ウェブサイトをスマートフォンに最適化する5つの理由
docomoやauがAndroid OSを搭載したスマートフォンを続々と投入しはじめたことで、このところ急速にシェアを伸ばしつつあるスマートフォン。 将来的に全キャリアでiPhoneの投入も考えられる今、しっかりと考えておかなければならないのが、ウェブサイトのスマートフォン最適化というやつです。 スマートフォンに搭載されているブラウザは、そもそもPC向けウェブサイトを閲覧できるものです。 そのため、「わざわざケータイサイトみたいに対応する必要なんかない」と言う声を多く聞きますが、これってモバイルサイトを主軸としてやってきた自分にとっては、そりゃ違うよーと思うわけです。 単著で出させていただいた「ケータイサイト解体新書」でも、チラッと言及したのですが、やっぱりスマートフォンはスマートフォンで、きちっと最適化させたサイトを提供すべきだと考えています。 というわけで、その理由を以下にまとめてみま
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
デザインが素敵な日本語Facebookページ 10選
Facebookページは2012年3月30日にタイムラインを採用した新デザインに全面移行するのに伴ない、デザインが素敵な日本語Facebookページ10選も新デザインに移行したページから再選出させていただきました。 2012年3月17日時点で、新デザインに移行している日本語Facebookブランド・企業ページは上位200位のうち、33ページに過ぎません。後2週間を切ってますので、以下のガイドを参考にしていただき、新デザインへの準備を怠りなく。 新Facebookページ 使い方・移行方法 目次 1. 新Facebookページ 使い方・移行方法 まとめ 2. 新デザインをプレビューし、準備が出来れば切り替えましょう 3. カバー写真などイメージを変更しましょう 4. Facebookの自己紹介（基本データ）を書きましょう 5. トップ掲載する写真、アプリを整理しましょう 6. 大事な出来事を設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap