たねっぱ！ » ネタ

chromeのおすすめ拡張機能10選

futappa_staff — Tue, 06 Jul 2021 01:08:25 +0000

ブラウザの拡張機能を入れるだけで、あらゆる場面で本当に便利になります。今回は、chromeの拡張機能でオススメの10選を紹介します。

最後に

便利なものが多いですが、あれもこれもと全部入れると重くなるので、必要なものを厳選して使うのがおすすめです。

コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

futappa_staff — Fri, 30 Oct 2020 00:50:36 +0000

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない
不要なレイヤーは削除する
セクション・パーツごとにグループ化する
レイヤー名は関連する名前にする
通常時・ホバー時のデザインをわかりやすくする
レイヤーをロックしない（場合による）
最後に

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。

不要なレイヤーは削除する

非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。

２、パーツ系は、まとめてグループにする

例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ１つのグループとしてまとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されているとまるごとアセット書き出しもできて便利です！

レイヤー名は関連する名前にする

「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。

通常時・ホバー時のデザインをわかりやすくする

ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。

レイヤーをロックしない（場合による）

あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。

最後に

レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪

コーディングしやすいデザインデータの作り方 ★Part２（テキスト編）

futappa_staff — Mon, 19 Oct 2020 01:18:57 +0000

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、テキスト周りの内容を中心にまとめました。

文字数が増減しても大丈夫なレイアウトにする
文字サイズは整数にする
デバイステキストで改行（brタグ）がいらないところでは、任意改行しない
文字の体裁を統一する
文字は最低でも10px以上にする（2倍デザインなら20px以上）
最後に

文字数が増減しても大丈夫なレイアウトにする

１行のときは大丈夫だけど、これが複数行になったらどうなるんだろう？と考えてしまうこともあります。どちらでも対応できるレイアウト、もしくは参考デザインが用意されているとよりスムーズです。

文字サイズは整数にする

ブラウザごとに小数点の扱い方が違うので（切り捨て、切り上げなど）、表示が異なってしまいます。

デバイステキストで改行（brタグ）がいらないところでは、任意改行しない

画像内の左の例ですが、手動で改行したテキストをエディターに流し込むと、改行された状態で貼り付けられます。そのため、まずは改行を消す作業が必要になります。
また、本当に改行は必要かもしれないという部分もあるときに、混乱してしまう可能性があるため気をつけましょう。

文字の体裁を統一する

フォント・サイズ・行間・ウェイトなど、同じレイアウトは体裁を揃えましょう。少し違うのがあると、あえてなのかミスなのかわからない場合があるため。

文字サイズは最低でも10px以上にする（2倍デザインなら20px以上）

スマホのデザインデータでよくありましたが、2倍サイズのデザインのはずが文字サイズ10pxという…。これ実装できたとしても5pxになるので読めませんよ（；；）という悲しいことになるので、気をつけましょう。

最後に

いかがでしたか。会社によりやり方が違う場合もあるかと思いますので、不安なところはコーダーさんに確認されると良いと思います。細かい事ばかり書いていますが、参考になりましたら幸いです。

「ページトップへ」のデザインを33個集めてみた（パート２）

futappa_staff — Mon, 05 Oct 2020 06:19:17 +0000

「ページトップへ戻るボタン」のデザインを集めたサイトが、あまり見当たらなかったので、まとめてみました。なるべく近年のサイトから探してみましたので、参考にどうぞ♪

矢印など

御用蕎麦司本家尾張屋 (HONKE OWARIYA) | 寛正六年(1465年)創業

WELL-BEING CYCLE 〜未来の当たり前を創る。未来の当たり前を拡げる〜 | IoT NEWS 生活環境創造室

#このラジオがヤバい | NHK・民放連共同ラジオキャンペーン

2019 SPRING / SUMMER 新商品｜Elégance CRUISE – エレガンスクルーズ

Vivit’s（ビビッツ）日本の果実のイキイキとした美味しさ｜伊藤園

ペルノ・リカール・ジャパン – Pernod Ricard Japan

津市久居の美容室｜hairxlifeACE(ヘアー×ライフエース) ヘアカット＆スタイリング

CREATOR’S VOICE かっぴー×雪下まゆ – SPECIAL TALKS｜「DAIV」すべてのクリエイターに送る究極のPC

レコレル｜働き方改革に対応カスタマイズできるクラウド型勤怠管理システム

広いめのページトップエリア

フッターに固定

DRIVE CHART(ドライブチャート) AIを活用した交通事故削減サービス

Emerald STACIA | Make it Happy

KYOTOGRAPHIE international photography festival

My Home, My Starbucks | おうちをスターバックスにして、サマー・マリアージュを楽しもう。

見えないからって油断してない？息がどこまで届くのか確かめてみた｜口臭科学研究所

ハトムギ姫｜クラシエのハトムギ専科｜クラシエ – Kracie

NPO法人ETIC.（エティック）｜実践型インターンシップ・社会起業・起業支援

まとめ

いかがでしたか？
色々なデザインがありますが、普段のサイト制作のときにお役に立てたら幸いです♪

ファビコンを取得する方法（おすすめAPIやブックマークレットなど）

rurippa! — Wed, 26 Feb 2020 05:08:39 +0000

はじめに

ファビコンのデザインを集めることがあり、そのときに役立ったツールを紹介します。

ブックマークレットを作ってみた

下記のコードをブックマーク（URL部分）に登録してみてください。
ファビコンを取得したいページを開き、登録したブックマークをワンクリックでファビコンを取得できるようになるので、お試しあれ。

		javascript:location.href='http://www.google.com/s2/favicons?domain='+location.hostname;

※新規タブで開くver

		javascript:open('http://www.google.com/s2/favicons?domain='+location.hostname,'_blank');

＜登録画面（chromeの場合）＞

最後に

いかがでしたか？いますぐ必要では無い方は、とりあえずブックマークしておくのも良いと思います。少しでもお役にたてば幸いです♪

ブラウザのシェア率の調べ方

rurippa! — Tue, 04 Feb 2020 02:40:36 +0000

はじめに

ブラウザによって使えるCSSが異なったり、見栄えが変わります。また、どこまでのブラウザに対応するかで、工数にも差が生まれます。
適切に対応できるようにするためにも、シェア率を知っておくことは大事だと思いますので、自分でも調べられる方法を紹介します！(^^)

調べ方

トップページの中程に、画像と同じ一覧があります。そこで、左上の「Browser Market Share」を選ぶとブラウザのシェア率を調べることができます。
他にも、OSや解像度・ブラウザバージョン別のシェアなど色々調べることができます。

次に、下記の部分で「Japan」を選択すると、調査対象を「国内」に限定できます。

期間やグラフの種類など、もっと細かい設定はグラフ右上「Edit Chart Data」からでできます。

日本語訳したものも添付しました。
「Statistic」では調べたい項目を選択できます（ブラウザのバージョン、OS別など）。さらにデバイスでも絞れます。
「Region」では、全国や日本だけ、アジアだけなどの範囲を選べます。
「Chart Type」ではグラフの種類を選べます。
「Period」では、調べたい期間を選択できます。直近の３ヶ月や、昨年の情報など、必要に応じて選んでみてください。

好きな設定ができたら、View Chartを選ぶと、グラフが表示されます。

今回は、国内限定で、2019年4〜6月の３ヶ月間のブラウザシェア率（PC）を調べました。個人的に棒グラフがみやすいので、この設定です。

2019年4〜6月の３ヶ月間のブラウザシェア率（PC）

Chrome 57.93%
IE 14.16%
Firefox　9.75%
Safari 8.6%
Edge 7.57%
Opera 0.73%

IEのシェア率はきになるところですが、、、まだ14%ありますね(^^;)さらに、ブラウザのバージョンも調べられますので、興味があれば調べてみてくださいね。

まとめ

いかがでしたか？
ブラウザのシェア率を調べておくことで、どのブラウザまで対応するべきか、この記述は使えるのか…など、事前に調べておくことができます。ぜひご活用ください♪

class名に使えそうな英語まとめ

rurippa! — Thu, 28 Nov 2019 01:17:40 +0000

class名など英単語を使うことも多いと思いますが、辞書で調べたりどちらにしようかとか、悩むことありませんか？
私もよく困ったので、使えそうなものやよく使うものをまとめてみます！（※長い単語は略称も一緒に書いてるものもありますが、正式な略ではないので、お気をつけください。）
ぜひ、同じ悩みをお持ちの方はご活用ください♪

ページ名やカテゴリー名に使えそうな英単語

about	〜について
company	会社概要など
service	サービス
work、works	事業実績
history	沿革、歴史
access	アクセス、交通情報
privacy	プライバシーポリシーなど
recommend	おすすめ
contact、inquiry	お問い合わせ
feature	特徴、特集
price	料金
news、information、info	ニュース、新着情報、情報
category	カテゴリー
result	結果
staff	スタッフ、社員紹介など
recruit	採用情報
faq	よくある質問、Q&A
other	その他

パーツ名やclass名に組み合わせて、使えそうな英単語

レイアウト関連など

wrap、wrapper	外枠
inner	インナー、内枠
block、box	ブロック、ボックス、要素をまとめるとき等
common、com、cmn	共通の
module、mod	モジュール、部品

テキスト系

note	注釈
notice、caution	警告、注意文
text、txt	テキスト、文章
title、tit、ttl	タイトル、見出し
lead	リード文
more	もっと、更に
detail	詳細、細部

パーツ名など

banner、bnr	バナー
logo	ロゴ画像
icon、icn	アイコン
button、btn	ボタン
movie	動画
image、img、thumbnail	画像、サムネイル
slide、slider	スライド、スライドショー
popup	ポップアップ

形の名称

circle	丸
triangle	三角
square	四角
round	角丸

最後に

いかがでしたか？英語など調べることも多々ありあますが、少しでも参考になりましたら幸いです(^^)

コーダーが選ぶ ATOMのおすすめテーマ（目に優しそうなシリーズ）

futappa_staff — Wed, 23 Oct 2019 02:32:37 +0000

はじめに

コーダーさんは日々画面との戦い！少しでも目に負担が少なくて、見やすい色味のテーマを探してみたので、ぜひ参考にしてみてください♪

new-moon-atom-syntax

全体的に色味が落ち着きながらも見やすい色味だと思います。

Slime

全体的にくすんだ色味で、派手さはないけ良い色合いだと思います。

ninja-atom-syntax

はっきりした色味ですが、全体的に少し色味を落としいて見やすくなっています。

monokai-neo-syntax

有名テーマの「monokai」より、色味を落としているテーマです。monokaiはちょっと色味がキツイかな？と思われる方は、こちらを選ぶと良いと思います。

pen-paper-coffee-syntax

背景がホワイト系ですが、その中でも落ち着いた色味で良いなと思ったので紹介します。

atom-dark-fusion-syntax

全体的に落ち着いた色味です。

city-lights-syntax

青みがかった色味の背景に合わせたカラーリングです。

seti-syntax

最後に紹介するのは、私も使っている有名テーマです。色味が好みというのが大きいですが（笑）有名テーマなだけあって、見やすくておすすめです。

まとめ

どうでしたか？正直好みによる部分もありますので、お気に入りのテーマが見つかっていたら嬉しいです(^^)

「ページトップへ」のデザインを20個集めてみた（パート１）

rurippa! — Thu, 17 Oct 2019 01:00:46 +0000

少し変わった形のものを優先で集めました！

よければ参考にどうぞ♪

矢印・三角・変形したデザイン

cocui – RING & ANNIVERSARY FRAME & PRESENT TICKET

WELLSTONE | 採用特設ページ

HAKUHODO & HAKUHODO DY MEDIA PARTNERS RECRUIT 2020

ホーム | あさってロボット会議

札幌のホームページ制作・Webサイト制作｜Rondomark

学校法人秋本学園　浦和つくし幼稚園採用サイト

京都京北の農家あらい農園 | 京都の京北(けいほく)で農業を営む、あらい農園のオフィシャルwebサイトです。無農薬・有機肥料で旬の野菜を育て、京都を中心に採れたての野菜の個配や野菜の振売を行っています。

イラストやキャラクターなど

FCA福岡デザイン&テクノロジー専門学校｜ゲーム・eスポーツ・CG映像・IT・漫画・アニメを学ぶ

7才の交通安全プロジェクトトップ | 共済・保障のことならこくみん共済 coop <全労済>

【コンビ】LakuMug（ラクマグ）| 自分で飲める、日本製ベビーマグ誕生！| ベビー用品のコンビ株式会社

株式会社もみの木

フッターに固定

大阪市城東区新築・改修工事を確かな施工品質で | 株式会社フロムフォーティーフォー

株式会社サカモト | キャラクター雑貨の企画、製造

株式会社トクバイ

ペエ歯科クリニック | 治療と予防を通じて地域の「元気」を応援する、菊池市の歯科医院です。

OCEANUS | オシアナス – CASIO

ネタ・動きがあるもの

工夫された動きをみているうちに、ページトップへ移動できます。ぜひ押してみてください♪
また押したくなるものが多いですね。

やざわ虎クリニック | 諏訪市上諏訪駅内科・外科・検査・健康診断

ページ右下の雲に隠れている虎の尻尾をクリックしてください。

HOPPIN’ GARAGE | できたらいいな。をつくろう

ページを下の方へ進めると、「TOP」という文字が現れるのでクリックしてください。

【公式】大阪堀江・兵庫県川西市のフォトスタジオハピスタ｜家族写真・子供写真・七五三

ページを下の方に進めると。「PAGE TOP」ボタンが現れるので、クリックしてください。風船を飛ばしながら、ページ上部へ移動します。

Newhattan | ニューハッタン日本公式サイト

矢印がマウスポインターにくっついてくるような動きになっています。

まとめ

いかがでしたか？
色々なデザインがありますが、普段のサイト制作のときにお役に立てたら幸いです♪

おすすめのセミナー・イベント

rurippa! — Mon, 05 Aug 2019 00:56:21 +0000

web業界では、セミナー・イベント・勉強会・もくもく会など色々あります。
今回は、セミナーに興味あるけど行ったことない方に向けておすすめのセミナーを紹介します！

イベント

WordCamp

WordCamp Japan – WordPress イベント「WordCamp」の日本語公式サイト

WordPressを使っている方におすすめイベントです！これから開催予定のWordCampを記載します。タイムテーブルをみ見れると雰囲気がわかりやすいと思います。

フロントエンドカンファレンス

フロントエンドに関わる方へ向けたイベント・コミュニティです。デザイナーもエンジニアもチェックしてみてください。

PHPカンファレンス

2019年に開催される全国のPHPカンファレンスのまとめ

PHPエンジニアさんはチェックしてみてください♩

セミナーを検索できるサイト

Meetup

WordPress (ワードプレス)のコミュニティになります。全国各地でセミナーなどがあります。WordPressに沿ったテーマになっているので、まずは興味があるテーマのときに参加してみると面白いと思います。

TECH PLAY［テックプレイ］ – IT勉強会・セミナーなどのイベント情報検索サービス

TECH PLAY

Facebook・Twitter

セミナーの主催者や参加者も含め、SNSで発信している方が多いため、タイムリーにセミナー情報を知ることができます。
FBのセミナーのコミュニティをフォローしておくのも良いと思います。

最後に

ここに載せているもの以外にも、たくさんのセミナーや勉強会などが全国各地あります。お一人で参加している方も多いですし、不安な方はお友達と一緒でもいいと思います。ぜひ、参加してみてください♩
余談ですが、セミナーでも名刺交換できる時間がある場合もあり、簡単な個人名刺でも結構ですので　あった方が便利かな？と思います（^^）※もちろん無くても大丈夫です

たねっぱ！ » ネタ

chromeのおすすめ拡張機能10選

目次

おすすめ一覧

Wappalyzer

One Tab

SearchPreview

Awesome ScreenShot

Save to Pocket

Clear Cache

PerfectPixel

EditThisCookie

ColorPick Eyedropper

Fontface Ninja

最後に

コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

目次

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

不要なレイヤーは削除する

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

２、パーツ系は、まとめてグループにする

レイヤー名は関連する名前にする

通常時・ホバー時のデザインをわかりやすくする

レイヤーをロックしない（場合による）

最後に

コーディングしやすいデザインデータの作り方 ★Part２（テキスト編）

目次

文字数が増減しても大丈夫なレイアウトにする

文字サイズは整数にする

デバイステキストで改行（brタグ）がいらないところでは、任意改行しない

文字の体裁を統一する

文字サイズは最低でも10px以上にする（2倍デザインなら20px以上）

最後に

「ページトップへ」のデザインを33個集めてみた（パート２）

目次

矢印など

広いめのページトップエリア

フッターに固定

まとめ

ファビコンを取得する方法（おすすめAPIやブックマークレットなど）

目次

はじめに

おすすめのツール

GoogleのAPI（非公式）

はてなのAPI（非公式）

ブックマークレットを作ってみた

最後に

ブラウザのシェア率の調べ方

目次

はじめに

おすすめのサイト

調べ方

2019年4〜6月の３ヶ月間のブラウザシェア率（PC）

まとめ

class名に使えそうな英語まとめ

ページ名やカテゴリー名に使えそうな英単語

パーツ名やclass名に組み合わせて、使えそうな英単語

レイアウト関連など

テキスト系

パーツ名など

形の名称

最後に

コーダーが選ぶ ATOMのおすすめテーマ（目に優しそうなシリーズ）

目次

はじめに

まとめ

「ページトップへ」のデザインを20個集めてみた（パート１）

目次

矢印・三角・変形したデザイン

イラストやキャラクターなど

フッターに固定

ネタ・動きがあるもの

まとめ

おすすめのセミナー・イベント

おすすめのセミナー

CSS Nite

Re:Creator’s Kansai

イベント

WordCamp