タグ別アーカイブ: HTML

スマホ用のページ作製はたとえ楽天市場やヤフーショッピングなどのモールであっても、画像のサイズ設定やタグをきちんとスマホ用にした方が良い

こんにちは。nekonomoridesignのyoshyです。
最近、ヤフーショッピングのサイトを作っていたのですが、その作業中、気づいた事がありました。

商品説明文(PC用)のところに、商品説明を画像で作ったものをIMGタグで配置したり、TABLEタグで左に画像、右側に文章を書くという感じの物をつくっていたのですが、それを気にせずにスマホ用の説明文(フリースペース)に貼り付けて商品ページをつくっていました。

スマホで見て見ると、画像が凄く小さかったり文字が凄く凝縮されていて見づらかった

スマートフォンは縦にスクロールするので、画像の右隣に配置した文字とかがぐちゃぐちゃっと寄せられてしまっていました。
さらに、画像の表示大きさ指定をしていなかったので、画像サイズが凄く大きいもの(600pxや800px等)のものはスマホの画面からはみ出していたり、テーブルタグも表示崩れのようになっていたのです。

スマホ用のIMGタグには、画像の大きさを、WIDTHで画像表示サイズを指定しよう

スマホ用の説明文のところにIMGタグを使用して画像を配置する場合は、WIDTH=100%で画像の表示サイズを100%に指定する方が良いと思います。

そうすれば、iphoneやAndroid等さまざまな機種のスマホがあってもそのスマホの表示サイズに合わせて%で比率を変えて表示してくれます。

個人的には100%だといっぱいっぱいでスペースが無いので、95%くらいにしています。

TABLEタグで2列配置にしている説明文は、上下2段での説明文にしよう

どういうことかと言いますと、簡単に言うと下記の図のような感じ。

↓これはパソコン用のタグ。

スマホ用タグとPC用タグの違い
スマホ用タグとPC用タグの違い

 

 

↓こっちがスマホ用。

1002-2

スマホの場合、縦スクロールで見る事を前提にして文字や画像の配置をした方が良いということです。
ですので、TABLEタグで、PCの時に左に画像、右に文字を売っている場合は、スマホ用は、上に画像、下に文字と言うふうに並び替えが必要だと言うことです。

CSSが使えない出店方法をしている店舗は、必ずタグの打ち変えが必要

CSS(スタイルシート)が使える環境での契約で出店している店舗の場合は、DIVタグで画像や文字のブロックを設定しておくだけで、FLOAT設定で右にしたり左にしたり上にしたりで変えられるので楽ですが、TABLEぐらいしか使えない又は昔にTABLEで組んでいたと言うところは、打ち変えしたほうがよいと思います。

今は、スマホからの購入も多いネットショッピング

いまや、各モール専用のアプリが出ているくらい、スマホ経由での購入も多いネットショップです。ですので、スマホ用のページも意識していく事も重要になってきます。

スマホ用ページをいじってない、、という店舗さんは一度見直しを検討されてみてはいかがでしょうか?

スマホでの自分の店舗の見栄えをチェックするのも良いですよ!

それでは、今日はこのあたりで失礼します。

スマホ用サイトの作製などの依頼やタグの打ち変え作業など細かい作業も請け負いますのでご相談されたい方はフォームからのご連絡お待ちしております♪

無料でHTML、PHP、CSS、Ruby、jQueryのプログラムを勉強する方法 動画でもなく実践で必ず身につくプログラム勉強サイト紹介

こんにちは。nekonomoridesignのyoshyです。プログラミングを勉強したいけどどうしていいかわからない。webデザインは出来るけどプログラムは出来ない、やってみたい。そんな人におすすめのサイトを今日は紹介したいと思います。

プログラミングレッスンサイト
Progate 無料プログラムレッスンサイト

最初、私もこんな無料で勉強出来るサイトがあるとは知りませんでした。このサイトを知ったきっかけは、今の会社に入社するまえ、プログラミングの勉強を自主的に行うようにと言うことで教えられたサイトなのです。このプログラミングレッスンサイトの特徴は・・・

  • 簡単な登録(Eメールと名前だけ)で即開始できる。
  • HTML+CSS(基礎)、HTML+CSS(応用)、PHP、Ruby、jQuery、を無料で学べる。
  • 初歩からやっていけるので基礎力が身につく
  • 独学でやってたことを復習できる
  • ヒント機能があるので自主勉強形式でも行き詰らない
  • 実際にプログラムを手打ちして覚えて行くので忘れにくい
  • エディターなどソフトも必要ない状態でプログラムを実際に打ち込みながら覚ええる形式でより実践的

という至れり尽くせりなプログラム勉強サイトなのです。

動画レッスンよりも、実際に出された課題をこなしていくほうが覚える

動画レッスンも最近はやっていますが、個人的に私の場合は、見ているだけでは覚えられないたちなので、このProgateが良かったです。
入社した会社(Webプログラム会社)が薦めてくるだけあって、本当に実践的で良いレッスンが受けられるのは凄いと思います。

プログラムは自分でプログラムを入力してみて、で、思い通りに動かなくて
「あれ・・なんで動かないの・・表示されないの・・・」
という絶望感を味わったほうが成長は早いです(笑)

手打ちでプログラム言語を打ち込んでいくと、50%くらいの確立でタグの打ち間違え、単語ミス、開始括弧l、閉じ括弧のミスなどが原因だったりします。
そういうのは、動画を見てるだけでは無理です。実際にやってみて、ミスって、初めて自分の癖みたいなのもわかりますし、タグの1つでプログラムが動かなくなる事を肌で覚えたほうが早いです。

デバッグ力(直す力)がある人は成長できる

プログラムの仕事を少しやってわかった事があります。
Filemakerでのプログラムのときでもそうですが、自分が組んだものが動かなかったとき、または、思い通りではなかったとき、表示が思うように出来なかったとき、プログラムソースを見て、バグ(間違え)を見つけなければなりません。

その時に、ミスった経験がない場合、たった1個の文字のうち間違えに多大なる時間がかかる場合もあります。絶対こんなとこはミスしないだろうと言うところが意外と間違えているパターンが、プログラムの場合は多く存在します。(コピペでもってきて途中までしかコピペされてなかったとかいう悲しいパターンとか・・)

普段から、デバッグを見つける能力を高める事こそが、より正確なプログラムを打てる用にもなりますし、そのためにもやはり独学だけでなく「基礎力」を最初からもう一度体に叩き込むのも良いと思います。

独学で勉強していた人が再復習するにもこのProgateでのプログラミング練習はおすすめ

私も独学でHTMLもCSSもやってきましたが、このProgateでの復習は今に役立って居ます。是非、プログラミングをやってみたいけど何からしたらいいかも判らない。独学でやってきたのを確かめたい、新しいプログラムを触ってみたいけど何からしていいかもわからない、と言う人は、このProgateでプログラムを練習したり、触ったりしてみると良いかもしれません。

おすすめです!

 

Filemakerを使って楽天市場やヤフーショッピングやAmazon用のCSVデータを一括で作成するソフトを開発したい

こんにちは。nekonomoridesignのyoshyです。
先日のファイルメーカーワークショップに行ってから、色々考える事がふえてワクワクしています。

元から、FilemakerはCSVデータを扱うときはほぼメインで使っていたソフトウェアなのですが、いつも中途半端にその場しのぎ用でプログラムを自作して、入力をやりやすくしたりとかそういう程度にしか作っていませんでした。

勉強会に参加して、本格的に、各モール対応の商品ページ作成データベースをファイルメーカーで開発しようと思い始める

前に勤務していた会社ではネットショップをメインとした仕事をさせていただいていて、主に商品ページの作成を中心に店舗運営全般を全面的に何でもやっている、と言う感じでした。

商品ページを作るのは、デザイン系の仕事なので、PhotoshopやIllustratorを使用してお客様に見ていただきやすいページ作りをしながら、出来た画像を元に、各モールへは手作業で商品ページをアップロードしていました。

CSVデータで一括で上げていたのはAmazon店だけだった

楽天もヤフーも、CSVで一括でデータのアップロードは可能なのですが、それぞれにCSVアップロードの形式も違えば、ルールも違います。アップロードするファイルも違うので、何かの手違いでミスして、全商品ページをロストしてしまうのが怖くて、出来ませんでした。

Amazonは、その点、商品ページのCSVデータアップも比較的】判り易いルールだったのと、自分のところに商品の元データをもっておかないとAmazon側からデータをダウンロード出来る機能はないので(2015年夏現在)自分のところに商品マスターが絶対に必要な以上、最初からCSVで商品データベースを作っておくほうが良いと思いAmazonだけは最初からファイルメーカーベースで商品ページ用データーベースを作っていました。

在職中の夢。共通の商品マスターを元に、各店舗のCSVデータを作れるようにしたかった

Amazon用のシステムは構築したのですが、日々の業務が忙しすぎたのと、開発に使える時間が勤務中はほとんどなく、Amazon用のシステムも、同僚と自分が仕事を早く終わらせるために自宅で開発したものでした。

冒頭に申し上げたようにそのシステムを作るときに楽天用とYahoo用のシステムも作りたいという野望はあったのですがあいにくかないませんでしたが、今になって、もうその会社には所属していないので自分がそういう仕事をする事はなくなってしまっていますが、実際にこういうシステムがあったら良いなと思いながら過ごしているネットショップ勤務の人がいるのではないかという思いが消えませんでした。

ファイルメーカーベースの受注ソフトはがんばれ店長が得意なら、私は商品ページ作成に特化したFilemakerベースのデータベースを作ってみようと思う

ネットショップ運営をしている方にとって、時間を割くべきは、商品の選定・戦略・商品の調査、売るためのページ作り、SEO対策・集客などであって、アップロードする時間は短時間のほうが良いに決まっています。

売るためのページの画像などのデータが出来た後、スッとアップロードできれば、それに越した事はないはずです。

Filemakerがすきでページ作りも好きな私にしか出来ないかもしれない

CSSなどの知識も有し、HTMLの知識もあるので、そういうのを活かしながら徐々に開発していって、テンプレート的なものを開発していこうと思っています。

まだどういったもので具体的に・・・というのがないのですが、もし誰か困っている方がいらっしゃいましたら、一度ご相談に載らせてください。
データベース開発にお力を貸していただける方も同時にいらっしゃましたらお声かけをいただけるとうれしいです。

近いうちにネットショップを自分でもオープンしてみようと画策中。

開発をするにあたり、やはり現場を知るのは大事だと思っています。
まだ個人事業主開業届けも出していないので法人契約がまだ出来ませんが、そう遠くないうちに出店して実際に自分でもネットショップ運営をもう一度したいと思っています。

忙しくなりそうですが、ファイルメーカーベースで何かネットショップ運営をされている方のお役に立てられればうれしいと思っています。

またこのFilemakerのソフト開発については進捗が在り次第お届けしたいと思います。

それでは、今日はこのあたりで。