URLを貼り付けるだけで各サイトの表示プレビューが確認できるサイト「Meta Tags」ウェブ制作において重要な役割を果たす「head」のコード。SEO対策をするにあたり非常に大切な部分です。サイトの顔にもなりうるheadタグ内は、GoogleのランキングやソーシャルメディアのOGPを設定する役割があります。 今日はそんな無料メタタグ確認・編集ツールである「Meta Tags」を紹介します。
すべてのウェブ開発者必見！サイトの快適度測定と解決法が分かる「Google Web Dev Portal」 | TECHNICAL CREATOR
Let's build the future of the web. With actionable guidance and analysis, web.dev helps developers like you learn and apply the web's modern capabilities to your own sites and apps. このサイトでできることは二つ。一つ目は任意のサイトのパフォーマンスやアクセシビリティなど一連のアクセス快適度を測定し、そのサイトの快適な部分・悪い部分を数値化およびレポートとしてまとめてくれます。二つ目は、その結果から対策が必要な箇所に対しての疑問点をサイト内の学習ページですぐ解決することができることです。 ただ測定をするだけではなく「ではどのように改善していったらいいのか」をその場ですぐに解決できるとあって、開発者にとって非常に使
もっと早く知りたかった…。デザイン関連まとめサイト「Design notes」の魅力
Design notes is a free online resource library for product designers. Free icon, free fonts and much more... ただ闇雲にまとめているわけではなく、フリー素材で誰でも使えるものを中心にしてまとめられています。課金が必要そうなものは大手デザインツールぐらいではないでしょうか。 またこちらのサイト、制作に関わる素材・ツールだけではなく大手各社のデザインガイドライン、プロトタイピングツール、デザインツール、UXの記事サイトや学習に必要な情報が書いてある公式ブログなどなど、本当にデザイナーに必要であるサイトが凝縮されています。最新のInDisign Blogもまとめられているので、随時更新はかけられているようです。願っても無いサイトではないでしょうか。 数ヶ月かけて集めたブックマークがこれひと
超軽量なCSSフレームワーク「Milligram」を試してみました。結構良かった。
技術検証のためにちょっとしたWebアプリを作ってるんですが、UIを組むのにゼロからデザインを作るのがめんどくさいのでCSSフレームワークを使うことに。いつもだったらBootstrapを使うんですけど、なんかそこまでじゃないんだよな〜それにBootstrap感マジ嫌いなんだよなーということで、別のフレームワークを使うことに。 色々探してたら超軽量なCSSフレームワーク「Milligram」を見つけたので試したところ、なんかいい感じだったので紹介します。 とにかく軽い 「A minimalist CSS framework」のキャッチコピーをうたっている通り、軽い。軽いです。なんとOnly 2kb gzipped! 使い方 Google Web FontsのRobotoと、normalize.cssを組み合わせて使います。 CDNで使う場合はこれを<head>の中に書けばOK。 <link r
Sketch上でタイムラインアニメーションが作成できるプラグイン「Diya」が間もなく登場
ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップ... 今日は最新のSketch44のことを書こうと思ったんですがね…出てしまいましたね…CraftのPrototype機能が！！！昨年の3月にInVisionに買収されたSilver Flows。今は「Craft」という名前でアップデートを続けています。最初のコンセプトムービーではプロトタイプを作成する様子が流れていたため、いつ出るかいつ出るか…と、首を長くして待っていたわけですが…ついに今日のアップデートで、Prototype機能が正式リリースされました！！！参考記事「InVisionにSilver Flowsがジョイン。彼らが描く未来とは？」早速使ってみたインストールしたら...
Sketchプラグインのハッカソンで作られたプロジェクトが公開中。
先日、ベルリンでSketchプラグインを作るハッカソンが行われたんですが、そのときに作られたプロジェクトが続々と公開されています。 Gif.me Plugin 動くGifアニメがSketch上に貼り付けられるプラグイン The Sketch Team loved being part of #SketchHackBLN this past weekend. Some fun and great plugins were developed like https://t.co/fkjADbW2kx https://t.co/I8FxYQm0mB — Sketch (@sketchapp) October 31, 2017 コレ面白そうだったんで試したんですけどうまく動かないんですよね。動いた人いたら教えてほしいです。
Sketch Advent Calendar 2017を作りました。
今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ Advent Calendarとは？ アドベントカレンダーとは12月1日からクリスマスまでの期間を数えるカレンダーのこと。日本では、IT・Web系の会社がクリスマスまで技術ブログを書くという風習があります。みんなお仕事大好き！ 毎年この時期は素晴らしい技術記事が生まれる 12月はみんな競って技術記事を書くので、毎年秀逸なものが生まれます。みなさん今年の総まとめということで気合をいれて書いているのでしょう。 テーマ「Sketch」で立ててみました UIデザインに関するカレンダーがなかったので、とりあえず「Sk
HTTPS化でFacebookのシェア数が0になってしまったのを直す方法 | TECHNICAL CREATOR
当サイト「テクニカルクリエイター」は10月8日よりサイト全体をHTTPS（常時SSL）に変更しました。なぜHTTPSに対応しなければならないのか？今後、HTTPSに対応していないサイトはGoogleの検索順位が下がってしまったり、ブラウザから警告が出てユーザーが閲覧できない... そうしたらHTTPだったころの記事についていたシェア数の表示が全部ゼロになってしまったんですね。URLが1文字でも変わってしまうとこういうことになるので、仕方がないかなと思って諦めてました。 シェアボタンのプラグインをやめた もともとこのサイトでは「AddToAny Share Buttons」というプラグインを使ってシェアボタンを実装していたのですが、このプラグインだと表示がちょっと遅いのが気になっていたのでオリジナルで書き直そうかなと思っていました。 で、せっかくなのでついでにHTTPだったころのシェア数も復
余白をいい感じに付けて書き出しができるSketchプラグイン「Sketch Slicer」
使い方 使い方は２つ。余白を付け加える方法と、サイズを指定する方法があります。 Slice with Padding（余白を付け加える） 書き出したいレイヤーを選んで、メニューのプラグインからSketch Slicerを選択 Enter Paddingに10と入力してSliceを実行すると 書き出すときはこの点線のレイヤーを選択すると余白付きで書き出せます。 Slice with Frame Frameでスライスすると指定したサイズで書き出せます。 もともと120×120の円を150×150のサイズにしてみます。 余白がつきました。 iOS用とAndroid用のサイズ指定も 「Select an export preset」というところでiOSかAndroidを選択すると、それぞれのOS用のサイズが指定されます。 書き出しやすいようにデザイナーの方がこういった細かいところを設定しておくと、
Libraryの差し替えができるSketchプラグイン「Symbol Swapper」
Sketch47が正式にリリースされました。まだアップデートしていない人はSketchを再起動、もしくはCheck For Updatesすると最新版がインストールできます。今回は大きく2つの追加機能がありますLibrariesSmooth Cornersそれぞれ解説します。Librariesで変わるチームによる共同作業LibrariesはSymbolを同期する機能です。今までSketchではドキュメント内で利用する共通のパーツをSymbol化することによって使いまわすことができました。このLibrariesは、Symbolが入ったSketchファイルを外部ファイルとして読み込むことによって、ファイル... 今までと制作フローが大きく変わるため、移行作業に手間が掛かっている方も多い様子。標準で用意されている機能だけでは物足りずに、ライブラリー関連のプラグインが続々と登場しています。 今日紹
まだフォント探しで消耗してるの？足りないフォントの検索ができるSketchプラグイン「FontBuddy」の使い方 | テクニカルクリエイター.com
まだフォント探しで消耗してるの？足りないフォントの検索ができるSketchプラグイン「FontBuddy」の使い方 Animaさんがまた素敵なプラグインを出してしまったようですね…。 他人からSketchファイルをもらったとき、「Missing Fonts」と警告が出ていたことはありませんか？ そうそう、こういうやつです。 そんなときに、自動的にフォントを探してインストールしてくれるプラグイン「FontBuddy」が公開されました！ FontBuddyの使い方 まずはサイトからダウンロードします。メアドの登録が必要です。 ダウンロードしたらFontBuddy.sketchpluginを開いてプラグインをインストールします。 インストールしていないフォントが使われているSｋetchファイルを開いてみると緑色の表示が出ています クリックすると、該当のフォントが検索されてプレビューが表示されます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナー必見！フリー＆商用可のおすすめイラスト素材サイト3選
Sketch初心者にもおすすめ！設計を効率的に、より速く作業するためのプラグインやライブラリーを紹介
プレゼンするときにデスクトップを綺麗にしてくれるMacアプリ「Pliim」が便利
SketchのデータをReact Nativeに変換するツールが登場？！
なぞるだけでSketchのベクターツールがうまく使えるようになるテンプレートが公開中
TECHNICAL CREATOR